feat: custom font

abehidek · Nov 28, 2023 · cf97234 · cf97234
1 parent 01c3154
commit cf97234
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 3 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -22,6 +22,7 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import hljs from "highlight.js"
+import "@fontsource/zen-kaku-gothic-new/index.css"
 
 window.test = () => {
   alert("test 2")

diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@fontsource/zen-kaku-gothic-new": "^5.0.16",
     "highlight.js": "^11.9.0"
   }
 }
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -4,7 +4,9 @@
 const plugin = require("tailwindcss/plugin")
 const fs = require("fs")
 const path = require("path")
+const defaultTheme = require("tailwindcss/defaultTheme")
 
+/** @type {import("tailwindcss").Config} */
 module.exports = {
   content: [
     "./js/**/*.js",
@@ -14,6 +16,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["Zen Kaku Gothic New", ...defaultTheme.fontFamily.sans]
+      },
       colors: {
         brand: "#FD4F00",
       }

diff --git a/config/config.exs b/config/config.exs
@@ -36,7 +36,7 @@ config :esbuild,
   version: "0.17.11",
   default: [
     args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js --bundle --loader:.woff2=file --loader:.woff=file --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

diff --git a/lib/hidek_xyz_web/components/layouts/root.html.heex b/lib/hidek_xyz_web/components/layouts/root.html.heex
@@ -8,10 +8,15 @@
       <%= assigns[:page_title] || "Page" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <link
+      phx-track-static
+      rel="stylesheet"
+      href={~p"/assets/node_modules/@fontsource/zen-kaku-gothic-new/index.css"}
+    />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-[#101414] text-white antialiased mx-auto max-w-2xl px-4 py-6 sm:px-6 lg:px-8">
+  <body class="bg-[#101414] text-white antialiased mx-auto max-w-2xl px-4 py-6 sm:px-6 lg:px-8 font-sans">
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/hidek_xyz_web/live/index_live.ex b/lib/hidek_xyz_web/live/index_live.ex
@@ -10,7 +10,8 @@ defmodule HidekXyzWeb.IndexLive do
   def render(assigns) do
     ~H"""
     <div>
-      <h1 class="font-bold text-3xl mb-4">Abe Guilherme Hidek</h1>
+      <h1 class="font-black text-3xl mb-4">Abe Guilherme Hidek</h1>
+      <p>あべ</p>
       <p>
         A generalist working for software development, days off experimenting things with elixir, rust and self-hosting.
       </p>