refactor: fallback font 지정 및 font-display 속성

boostcampwm2023 · Jan 19, 2024 · 90c537e · 90c537e
1 parent d57541f
commit 90c537e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/front/src/GlobalStyles.tsx b/front/src/GlobalStyles.tsx
@@ -7,16 +7,18 @@ const GlobalStyles = createGlobalStyle`
 
   @font-face {
     font-family: 'Pretendard-Regular';
-    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff2');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
   }
 
   @font-face {
     font-family: 'KingSejongInstitute';
-    src: url('/fonts/KingSejongInstitute-Regular.ttf') format('truetype');
+    src: url('/fonts/KingSejongInstitute-Regular.ttf') format('woff2');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
   }
 
   @keyframes fadeIn {

diff --git a/front/src/components/SnowGlobeCanvas/models/Bottom.tsx b/front/src/components/SnowGlobeCanvas/models/Bottom.tsx
@@ -27,7 +27,7 @@ const Bottom: React.FC<BottomProps> = ({
       width: 1024,
       height: 1024,
       positionY: 1024 / 8,
-      font: 'Bold 6.25rem KingSejongInstitute',
+      font: 'Bold 6.25rem KingSejongInstitute, sans-serit',
       fontColor: 'black',
       backgGroundColor: 'white'
     });

diff --git a/front/src/utils/theme.tsx b/front/src/utils/theme.tsx
@@ -16,18 +16,20 @@ const colors = {
 const font = {
   '--text-shadow':
     '-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black',
-  '--normal-title-font': 'normal normal 400 2rem/normal "KingSejongInstitute"',
+  '--normal-title-font':
+    'normal normal 400 2rem/normal "KingSejongInstitute", sans-serif',
   '--normal-introduce-font':
-    'normal normal 400 1.125rem/150% "KingSejongInstitute"',
-  '--normal-login-font': 'normal normal 400 1rem/100% "Pretendard-Regular"',
+    'normal normal 400 1.125rem/150% "KingSejongInstitute", sans-serif',
+  '--normal-login-font':
+    'normal normal 400 1rem/100% "Pretendard-Regular", sans-serif',
   '--normal-button-font':
-    'normal normal 400 1.125rem/150% "KingSejongInstitute"',
+    'normal normal 400 1.125rem/150% "KingSejongInstitute", sans-serif',
   '--normal-nickname-font':
-    'normal normal 400 1.75rem/normal "KingSejongInstitute"',
+    'normal normal 400 1.75rem/normal "KingSejongInstitute", sans-serif',
   '--normal-nickname-input-font':
-    'normal normal 400 1.5rem/1.25rem "Pretendard-Regular"',
+    'normal normal 400 1.5rem/1.25rem "Pretendard-Regular", sans-serif',
   '--normal-main-header-font':
-    'normal normal 400 1rem/160% "KingSejongInstitute"'
+    'normal normal 400 1rem/160% "KingSejongInstitute", sans-serif'
 };
 
 const size = {