Fix: 웹 폰트 설치

어느 기기에서든 폰트 통일
Yanabada · Jan 30, 2024 · 3632f33 · 3632f33
1 parent 6d3e2f9
commit 3632f33
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 11 deletions.
diff --git a/src/fonts/Pretendard-Black.woff b/src/fonts/Pretendard-Black.woff
diff --git a/src/fonts/Pretendard-Bold.woff b/src/fonts/Pretendard-Bold.woff
diff --git a/src/fonts/Pretendard-ExtraBold.woff b/src/fonts/Pretendard-ExtraBold.woff
diff --git a/src/fonts/Pretendard-ExtraLight.woff b/src/fonts/Pretendard-ExtraLight.woff
diff --git a/src/fonts/Pretendard-Light.woff b/src/fonts/Pretendard-Light.woff
diff --git a/src/fonts/Pretendard-Medium.woff b/src/fonts/Pretendard-Medium.woff
diff --git a/src/fonts/Pretendard-Regular.woff b/src/fonts/Pretendard-Regular.woff
diff --git a/src/fonts/Pretendard-SemiBold.woff b/src/fonts/Pretendard-SemiBold.woff
diff --git a/src/fonts/Pretendard-Thin.woff b/src/fonts/Pretendard-Thin.woff
diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+
+import PretendardRegular from "../fonts/Pretendard-Regular.woff";
+import PretendardBold from "../fonts/Pretendard-Bold.woff";
+
+export const fonts = css`
+  @font-face {
+    font-family: Pretendard;
+    font-style: normal;
+    font-weight: normal;
+    src:
+      local("Pretendard"),
+      url(${PretendardRegular}) format("woff");
+  }
+
+  @font-face {
+    font-family: Pretendard;
+    font-style: normal;
+    font-weight: 500;
+    src:
+      local("Pretendard"),
+      url(${PretendardBold}) format("woff");
+  }
+`;
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
@@ -1,10 +1,12 @@
 import { css } from "@emotion/react";
+import { fonts } from "./fonts";
 
 const globalStyles = css`
   * {
     margin: 0px;
     box-sizing: border-box;
   }
+  ${fonts}
 
   ::-webkit-scrollbar {
     width: 8px;
@@ -43,7 +45,22 @@ const globalStyles = css`
   textarea,
   label,
   table {
-    font-family: "Pretendard-Regular";
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
     margin: 0;
     padding: 0;
     border: 0;
@@ -63,23 +80,45 @@ const globalStyles = css`
     list-style: none;
   }
   button {
-    font-family: "Pretendard-Regular";
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
     border: 0;
     background: transparent;
     cursor: pointer;
     padding: 0;
     margin: 0;
   }
   input {
-    font-family: "Pretendard-Regular";
-  }
-
-  @font-face {
-    font-family: "Pretendard-Regular";
-    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
-      format("woff");
-    font-weight: 400;
-    font-style: normal;
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
   }
 `;