ํ์ฌ์์ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ Next13์ ๋์ ํ์ฌ ๋ง๋ค๊ธฐ๋ก ๊ฒฐ์ ํ์ฌ ๊ฐ๋ฐ ์งํ์ค์, ์ฐ๋ฆฌ๋ Google Font๊ฐ ์๋ Local Font๋ฅผ ์ฌ์ฉํ๊ฒ ๋์ด, ์ฝ์ง์ ์กฐ๊ธ ํ๋ค๊ฐ... ์ธํ ํ ๋ด์ฉ์ ์ ๋ฆฌํ๋ ค ํ๋ค.
์ฐ์ , Next ๊ณต์ ํํ์ด์ง์์ App Router ์ฌ์ฉ ๋ฐฉ์์ผ๋ก Font๋ฅผ ์ค์ ํ๋ ๋ถ๋ถ์ ๋ณด๋ฉด
1. Google Font๋ฅผ ์ฌ์ฉํ๊ฑฐ๋, 2. Local Font๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ผ๋ก ํฌ๊ฒ ๋๋๋ค.
์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ค๋ Font๋ Pretendard ์๋๋ฐ, Google Font์ ์๋ ํฐํธ์ฌ์ Local Font๋ฅผ ์ ์ฉํด์ผ ํ๋ค...^_ใ
๋ง์ฝ Google Font์์ ์ง์ํ๋ ํฐํธ์ผ ์ ์์ผ๋ ํด๋น ์ฌ์ดํธ์์ ์์นํด๋ณธ ํ ์๋ค๋ฉด Local Font๋ฅผ ์ฌ์ฉํ๋ ๊ฑธ๋ก.... (Google Font ์ฌ์ดํธ ๋ฐ๋ก๊ฐ๊ธฐ)
Google Font๋ Local Font๋ Next์์๋ ๋ชจ๋ Variable Font(๊ฐ๋ณํฐํธ)๋ฅผ ์ฌ์ฉํ๋๊ฒ์ ๊ถ์ฅํ๋ค.
Flexibleํ๊ฒ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด Variable Font๋ฅผ ์ฌ์ฉํ๋๋ก ํ์...!
(Variable Font๋ ํฐํธ ํ์ผ์์ ์ฌ๋ฌ ๊ฐ์ง font-weigh, ์คํ์ผ, ๋๋น ๋ฑ ๋ค์ํ ๋ณํ์ ํฌํจํ ์ ์๋ ํฐํธ ํ์์ด๋ค. - chatGPT)
Local Font Setting
Local Font ์ธํ ํ๋ ๋ถ๋ถ ์ฐธ๊ณ ๋ฌธ์
1. app/layout.tsx์์ next/font/local ๊ฒฝ๋ก์ ์๋ localFont๋ฅผ import ํ๊ณ , localFont์ src์์ฑ์ ๋ด local ํฐํธ ๊ฒฝ๋ก๋ฅผ ์ ์ด์ค๋ค. ์ด๋ ์ ์ฉํ ํฐํธ ํ์ผ์ app/ ๋๋ ํ ๋ฆฌ ์์์ ๋ฃ์ด์ฃผ๋๊ฑธ ์ถ์ฒํ๋ค. (์์: app/fonts/my-font-file.woff)
// app/layout.tsx
import localFont from 'next/font/local'
// Font files can be colocated inside of `app`
const myFont = localFont({
src: './Myfont.woff2',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}
2. ๋ค์ํ ํฐํธ ํจ๋ฐ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด src๋ฅผ array ํํ๋ก ์ ์ธํ์ฌ ์ฌ์ฉํ๋ฉด ๋๋ค.
// app/layout.tsx
const roboto = localFont({
src: [
{
path: './Myfont-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Myfont-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Myfont-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Myfont-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
],
})
Web Font Setting - Pretendard
๋๋ Next์์ ์ถ์ฒํ๋ ๋ฐฉ์๋๋ก Variable Font๋ฅผ ์ ์ฉํ๊ณ ์ถ์ด์ Pretendard ํฐํธ์ Variable Font๋ฅผ ๊ฒ์ํด๋ณด์๋ค.
์ด์ด ์ข๊ฒ๋ ๋ด๊ฐ ์ ์ฉํ๋ ค๋ ํฐํธ๋ GitHub์ ์นํฐํธ ์ฌ์ฉ Docs๊ฐ ์์๋ค..!!
Pretendard ๋ค์ด๋๋ฏน ์๋ธ์
๋๋ CDN์ ์ด์ฉํ์ฌ globals.css ์ import ํ, ์ ์ฒด ์คํ์ผ์ ์ ์ฉ์์ผ์ฃผ์๋ค.
/* globals.css */
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.7/static/pretendard-dynamic-subset.css");
* {
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;
box-sizing: border-box;
padding: 0;
margin: 0;
}
์ผ์ชฝ์ Pretendard Variable Font ์ ์ฉ ๋ชจ์ต, ์ค๋ฅธ์ชฝ์ font-family ์์ฑ์ ๋ณด๋ ์ ์ ์ฉ๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค -!
๐ธ ์ถ์ฒ ๐ธ
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ Sentry ] F.E์์ Sentry๋ฅผ ํ์ฉํ์ฌ ๋๋ฒ๊น ํ๊ธฐ. (0) | 2024.05.19 |
---|---|
[ React ] Suspense๋ ๋ฌด์์ผ๊น? (0) | 2023.07.16 |
[ Next.js ] Next13์ ์ฃผ์ ๊ธฐ๋ฅ์ ๋ํด ์์๋ณด์. (0) | 2023.06.05 |
[ React ] ์ํ ๊ด๋ฆฌ ํด ๋น๊ต ๋ถ์ Recoil vs Zustand (0) | 2023.05.21 |
[ React ] React Props ์์๋ณด๊ธฐ. (0) | 2023.03.20 |