Merge pull request #1661 from chainapsis/roy/KEPLR-1396

Load Inter font for ko locale & Add NatoSansSC font

Author: Thunnini

apps/extension/src/public/assets/font/NatoSansSC-Bold.woff2

@@ -19,11 +19,14 @@ export const GlobalStyle = createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     
     &[data-lang="ko"] {
-      font-family: 'NotoSansKR', sans-serif;
+      font-family: 'Inter', 'NotoSansKR', sans-serif;
       
       word-break: keep-all;
       word-wrap: break-word;
     }
+    &[data-lang="zh-cn"] {
+      font-family: 'Inter', 'NotoSansSC', sans-serif;
+    }
     color: ${(props) =>
       props.theme.mode === "light"
         ? ColorPalette["gray-700"]
@@ -49,7 +52,10 @@ export const GlobalStyle = createGlobalStyle`
     color: ${ColorPalette["gray-200"]};
 
     &[data-lang="ko"] {
-      font-family: 'NotoSansKR', sans-serif;
+      font-family: 'Inter', 'NotoSansKR', sans-serif;
+    }
+    &[data-lang="zh-cn"] {
+      font-family: 'Inter', 'NotoSansSC', sans-serif;
     }
   }
 

apps/extension/src/public/assets/font/NatoSansSC-Medium.woff2

@@ -2,69 +2,105 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { useLanguage } from "./languages";
 import { useLayoutEffectOnce } from "./hooks/use-effect-once";
 
+const interFontFaces = [
+  new FontFace(
+    "Inter",
+    `url(${require("./public/assets/font/Inter-Regular.ttf")})`,
+    {
+      weight: "400",
+    }
+  ),
+  new FontFace(
+    "Inter",
+    `url(${require("./public/assets/font/Inter-Medium.ttf")})`,
+    {
+      weight: "500",
+    }
+  ),
+  new FontFace(
+    "Inter",
+    `url(${require("./public/assets/font/Inter-SemiBold.ttf")})`,
+    {
+      weight: "600",
+    }
+  ),
+  new FontFace(
+    "Inter",
+    `url(${require("./public/assets/font/Inter-Bold.ttf")})`,
+    {
+      weight: "700",
+    }
+  ),
+];
+
+const notoSansSCFontFaces = [
+  new FontFace(
+    "NotoSansSC",
+    `url(${require("./public/assets/font/NatoSansSC-Regular.woff2")})`,
+    {
+      weight: "400",
+    }
+  ),
+  new FontFace(
+    "NotoSansSC",
+    `url(${require("./public/assets/font/NatoSansSC-Medium.woff2")})`,
+    {
+      weight: "500",
+    }
+  ),
+  new FontFace(
+    "NotoSansSC",
+    `url(${require("./public/assets/font/NatoSansSC-SemiBold.woff2")})`,
+    {
+      weight: "600",
+    }
+  ),
+  new FontFace(
+    "NotoSansSC",
+    `url(${require("./public/assets/font/NatoSansSC-Bold.woff2")})`,
+    {
+      weight: "700",
+    }
+  ),
+];
+
+const notoSansKRFontFaces = [
+  new FontFace(
+    "NotoSansKR",
+    `url(${require("./public/assets/font/NotoSansKR-Regular.woff2")})`,
+    {
+      weight: "400",
+    }
+  ),
+  new FontFace(
+    "NotoSansKR",
+    `url(${require("./public/assets/font/NotoSansKR-Medium.woff2")})`,
+    {
+      weight: "500",
+    }
+  ),
+  new FontFace(
+    "NotoSansKR",
+    `url(${require("./public/assets/font/NotoSansKR-Medium.woff2")})`,
+    {
+      weight: "600",
+    }
+  ),
+  new FontFace(
+    "NotoSansKR",
+    `url(${require("./public/assets/font/NotoSansKR-Bold.woff2")})`,
+    {
+      weight: "700",
+    }
+  ),
+];
+
 const languageToFontFaces: {
   [lang: string]: FontFace[] | undefined;
 } = {
-  en: [
-    new FontFace(
-      "Inter",
-      `url(${require("./public/assets/font/Inter-Regular.ttf")})`,
-      {
-        weight: "400",
-      }
-    ),
-    new FontFace(
-      "Inter",
-      `url(${require("./public/assets/font/Inter-Medium.ttf")})`,
-      {
-        weight: "500",
-      }
-    ),
-    new FontFace(
-      "Inter",
-      `url(${require("./public/assets/font/Inter-SemiBold.ttf")})`,
-      {
-        weight: "600",
-      }
-    ),
-    new FontFace(
-      "Inter",
-      `url(${require("./public/assets/font/Inter-Bold.ttf")})`,
-      {
-        weight: "700",
-      }
-    ),
-  ],
-  ko: [
-    new FontFace(
-      "NotoSansKR",
-      `url(${require("./public/assets/font/NotoSansKR-Regular.woff2")})`,
-      {
-        weight: "400",
-      }
-    ),
-    new FontFace(
-      "NotoSansKR",
-      `url(${require("./public/assets/font/NotoSansKR-Medium.woff2")})`,
-      {
-        weight: "500",
-      }
-    ),
-    new FontFace(
-      "NotoSansKR",
-      `url(${require("./public/assets/font/NotoSansKR-Medium.woff2")})`,
-      {
-        weight: "600",
-      }
-    ),
-    new FontFace(
-      "NotoSansKR",
-      `url(${require("./public/assets/font/NotoSansKR-Bold.woff2")})`,
-      {
-        weight: "700",
-      }
-    ),
-  ],
+  en: interFontFaces,
+  "zh-cn": [...interFontFaces, ...notoSansSCFontFaces],
+  ko: [...interFontFaces, ...notoSansKRFontFaces],
 };
 
 export const useLoadFonts = () => {