feat: apply font-display: swap for better CLS performance

DDD-Community · Dec 29, 2024 · 3f46e02 · 3f46e02
1 parent 1d2bc91
commit 3f46e02
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,26 +14,31 @@ const PretendVariable = localFont({
 const Jooree = localFont({
   src: '../../public/fonts/Jooree.ttf',
   variable: '--font-jooree',
+  display: 'swap',
 })
 
 const Hesom = localFont({
   src: '../../public/fonts/Hesom.ttf',
   variable: '--font-hesom',
+  display: 'swap',
 })
 
 const Eunyoung = localFont({
   src: '../../public/fonts/eunyoung.woff2',
   variable: '--font-eunyoung',
+  display: 'swap',
 })
 
 const Ttaerom = localFont({
   src: '../../public/fonts/ttaerom.ttf',
   variable: '--font-ttaerom',
+  display: 'swap',
 })
 
 const Hipi = localFont({
   src: '../../public/fonts/hipi.ttf',
   variable: '--font-hipi',
+  display: 'swap',
 })
 
 export const metadata: Metadata = {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -66,11 +66,11 @@ const config: Config = {
       },
       fontFamily: {
         pretendard: ['var(--font-pretendard-variable)'],
-        jooree: ['var(--font-jooree)'],
-        hesom: ['var(--font-hesom)'],
-        eunyoung: ['var(--font-eunyoung)'],
-        ttaerom: ['var(--font-ttaerom)'],
-        hipi: ['var(--font-hipi)'],
+        jooree: ['var(--font-jooree)', 'var(--font-pretendard-variable)'],
+        hesom: ['var(--font-hesom)', 'var(--font-pretendard-variable)'],
+        eunyoung: ['var(--font-eunyoung)', 'var(--font-pretendard-variable)'],
+        ttaerom: ['var(--font-ttaerom)', 'var(--font-pretendard-variable)'],
+        hipi: ['var(--font-hipi)', 'var(--font-pretendard-variable)'],
       },
       keyframes: {
         'slide-left': {