perf(fe): use dynamic subset of pretendard (#1706)

skkuding · May 24, 2024 · 943584d · 943584d
1 parent 650cab3
commit 943584d
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 16 deletions.
diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx
@@ -1,21 +1,13 @@
 import { Toaster } from '@/components/ui/sonner'
 import { metaBaseUrl } from '@/lib/constants'
-import { cn } from '@/lib/utils'
 import type { Metadata, Viewport } from 'next'
 import { Ubuntu_Mono } from 'next/font/google'
-import localFont from 'next/font/local'
+import 'pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css'
 import './globals.css'
 
 // TODO: 추후에 페이지 별로 revalidate 시간 논의 및 조정 필요
 export const revalidate = 5
 
-const pretendard = localFont({
-  src: './PretendardVariable.woff2',
-  display: 'swap',
-  weight: '45 920',
-  variable: '--font-pretendard'
-})
-
 const mono = Ubuntu_Mono({
   subsets: ['latin'],
   weight: ['400'],
@@ -42,7 +34,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={cn(pretendard.variable, mono.variable)}>
+    <html lang="en" className={mono.variable}>
       <body>
         {children}
         <Toaster

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -68,6 +68,7 @@
     "next": "14.2.3",
     "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
+    "pretendard": "^1.3.9",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",

diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
@@ -26,7 +26,7 @@ export default {
         editor: '3rem minmax(0, 1fr)'
       },
       fontFamily: {
-        sans: ['--font-pretendard', ...defaultTheme.fontFamily.sans],
+        sans: ['Pretendard Variable', ...defaultTheme.fontFamily.sans],
         mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono]
       },
       colors: {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml