Apply fonts

Code-Poker · Apr 25, 2024 · fb59825 · fb59825
1 parent efdfca4
commit fb59825
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { ColorModeScript, Box, Container } from '@chakra-ui/react'
 import theme from '@/utils/theme'
 import { Navbar } from '@/app/components/layout/Navbar';
 import { Footer } from '@/app/components/layout/Footer';
+import Fonts from '@/utils/font';
 
 export const metadata: Metadata = {
   title: 'SSUJoon',
@@ -21,6 +22,7 @@ export default function RootLayout({
     <html lang="ko">
       <body>
         <ColorModeScript initialColorMode={theme.config.initialColorMode}></ColorModeScript>
+        <Fonts />
         <Providers>
           <Box minH='100dvh'>
           <Navbar />

diff --git a/src/utils/font.tsx b/src/utils/font.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { Global } from '@emotion/react'
+
+const Fonts = () =>  (
+  <Global
+    styles={`
+      @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
+      @import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
+    `}
+  />
+)
+
+export default Fonts
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -5,6 +5,12 @@ const config: ThemeConfig = {
   useSystemColorMode: true,
 }
 
-const theme = extendTheme({ config })
+const theme = extendTheme({
+  config: config,
+  fonts: {
+    heading: `'Pretendard', sans-serif`,
+    body: `'Pretendard', sans-serif`,
+  }
+})
 
 export default theme