fix: load spoqa font with webfontloader (#99)

yourssu · May 16, 2024 · 3d0b90a · 3d0b90a
1 parent 35c8d84
commit 3d0b90a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 20 deletions.
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@storybook/react-vite": "^8.0.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/webfontloader": "^1.6.38",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
@@ -70,6 +71,7 @@
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.5.3",
     "vite-tsconfig-paths": "^4.2.0",
+    "webfontloader": "^1.6.28",
     "xmldom": "^0.6.0"
   },
   "packageManager": "[email protected]"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/style/globalStyle/GlobalStyle.tsx b/src/style/globalStyle/GlobalStyle.tsx
@@ -1,10 +1,18 @@
 import { createGlobalStyle } from 'styled-components';
+import WebFont from 'webfontloader';
+
+WebFont.load({
+  custom: {
+    families: ['Spoqa Han Sans Neo'],
+    urls: ['//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css'],
+  },
+});
 
 export const GlobalStyles = createGlobalStyle`
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font-family: 'Spoqa Han Sans Neo', 'sans-serif';
-    }
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  }
 `;