feat: add and load NatoSansSC webfont

Author: jungcome7

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

@@ -24,6 +24,9 @@ export const GlobalStyle = createGlobalStyle`
       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"]
@@ -51,6 +54,9 @@ export const GlobalStyle = createGlobalStyle`
     &[data-lang="ko"] {
       font-family: 'Inter', 'NotoSansKR', sans-serif;
     }
+    &[data-lang="zh-cn"] {
+      font-family: 'Inter', 'NotoSansSC', sans-serif;
+    }
   }
 
   // Set border-box as default for convenience.

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

@@ -33,41 +33,74 @@ const interFontFaces = [
   ),
 ];
 
+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: interFontFaces,
-  ko: [
-    ...interFontFaces,
-    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",
-      }
-    ),
-  ],
+  "zh-cn": [...interFontFaces, ...notoSansSCFontFaces],
+  ko: [...interFontFaces, ...notoSansKRFontFaces],
 };
 
 export const useLoadFonts = () => {