monospace日本語フォントをNotoSansJPに固定

Author: na-trium-144

app/globals.css

@@ -1,20 +1,7 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
-/* inconsolata-latin-wght-normal */
-@font-face {
-  font-family: "Inconsolata Variable";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 200 900;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2)
-    format("woff2-variations");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-
+/* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
-  --font-mono: "Inconsolata Variable", monospace;
+  --font-mono: "Inconsolata Variable", "Noto Sans JP Variable", monospace;
 }

app/layout.tsx

@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import "@fontsource-variable/noto-sans-jp";
+import "@fontsource-variable/inconsolata";
 import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";

app/terminal/terminal.tsx

@@ -71,19 +71,9 @@ export function useTerminal(props: TerminalProps) {
   useEffect(() => {
     const abortController = new AbortController();
 
-    (async () => {
-      // globals.cssでフォントを指定し読み込んでいるが、
-      // それが読み込まれる前にterminalを初期化してしまうとバグる。
-      // なのでここでフォントをfetchし成功するまでterminalの初期化は待つ
-      try {
-        await fetch(
-          "https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2",
-          { signal: abortController.signal }
-        );
-      } catch {
-        // ignore
-      }
-
+    // globals.cssでフォントを指定し読み込んでいるが、
+    // それが読み込まれる前にterminalを初期化してしまうとバグる。
+    document.fonts.load("0.875rem Inconsolata Variable").then(() => {
       if (!abortController.signal.aborted) {
         const fromCSS = (varName: string) =>
           window.getComputedStyle(document.body).getPropertyValue(varName);
@@ -96,7 +86,7 @@ export function useTerminal(props: TerminalProps) {
           fontSize: 14,
           lineHeight: 1.4,
           letterSpacing: 0,
-          fontFamily: "Inconsolata Variable",
+          fontFamily: "'Inconsolata Variable','Noto Sans JP Variable'",
           theme: {
             // DaisyUIの変数を使用してテーマを設定している
             // TODO: ダークテーマ/ライトテーマを切り替えたときに再設定する?
@@ -134,7 +124,7 @@ export function useTerminal(props: TerminalProps) {
         setTermReady(true);
         onReadyRef.current?.();
       }
-    })();
+    });
 
     const observer = new ResizeObserver(() => {
       // fitAddon.fit();

package-lock.json

@@ -14,6 +14,8 @@
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
+    "@fontsource-variable/inconsolata": "^5.2.6",
+    "@fontsource-variable/noto-sans-jp": "^5.2.6",
     "@google/generative-ai": "^0.24.1",
     "@opennextjs/cloudflare": "^1.6.3",
     "@xterm/addon-fit": "^0.11.0-beta.115",