フォントのフォールバックをめっちゃ指定した

Author: na-trium-144

app/globals.css

@@ -102,12 +102,25 @@ mycdark:
   あまり変なフォントが選ばれるとターミナルやコードエディターの表示が崩れる可能性があるので適当に指定している
   */
   --font-mono:
-    /*"Inconsolata",*/
-    "Inconsolata Variable", "Noto Sans JP", "Noto Sans CJK JP",
+    "Inconsolata Variable",
+    /* TailwindCSSデフォルトの欧文フォント */ "SFMono-Regular", "Menlo",
+    "Monaco", "Consolas", "Liberation Mono", "Courier New",
+    /* 日本語用にNotoSans */ "Noto Sans JP", "Noto Sans CJK JP",
     "Source Han Sans JP", "源ノ角ゴシック", "Noto Sans JP Variable", monospace;
   /*
+  本家のフォント名は Rounded M+ 1c 、または1pでもいいかも
+  layout.tsxでインポートしているwebフォントが M PLUS Rounded 1c
+
+  それ以下はM+をダウンロードするまでの間表示されるswap用フォールバックとしてM+に見た目が近いものを指定。
+  Hiragino Maru Gothic は見た目はめっちゃきれいなんだけど太字がない :cry:
+  Meiryo は日本語の形がM+に近いが、英数がダメ
   */
   --font-sans:
-    "M PLUS Rounded 1c", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+    "Rounded M+ 1c", "Rounded M+ 1p", "M PLUS Rounded 1c",
+    /* 以下fallback */ "M+ 1c", "MigMix 1c", "Migu 1c",
+    "Hiragino Maru Gothic ProN", "Noto Sans", "Arial", "Liberation Sans",
+    "Meiryo", sans-serif,
+    /* TailwindCSSでデフォルトで指定されていた絵文字フォントは一応残しておく */
+      "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }