사용방법
•
next/font 를 이용함.
•
모든 폰트 파일에 대해 내장된 자동 self-hosting 기능이 포함되어 있음.
이로 인해 CSS의 size-adjust 속성을 사용하여 웹 폰트를 최적으로 로드가 가능함.
•
모든 Google Fonts를 편리하게 사용할 수 있도록 지원
•
CSS와 폰트 파일이 빌드 시간에 다운로드되어 기타 정적 자산과 함께 self-hosted 됨.
(브라우저에서 Google로 요청이 전송되지 않음.)
•
next/font/google에서 함수로 가져와서 시작
// 예시
import { Roboto_Mono } from 'next/font/google'
const robotoMono = Roboto_Mono({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={robotoMono.className}>
<body>{children}</body>
</html>
)
}
JavaScript
복사
CSS를 이용하는 방법
// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap',
})
const roboto_mono = Roboto_Mono({
subsets: ['latin'],
variable: '--font-roboto-mono',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
<body>
<h1>My App</h1>
<div>{children}</div>
</body>
</html>
)
}
JavaScript
복사
// app/global.css
html {
font-family: var(--font-inter);
}
h1 {
font-family: var(--font-roboto-mono);
}
CSS
복사
로컬 폰트
•
next/font/local을 가져오고 로컬 폰트 파일의 src를 지정.
•
// app/layout.tsx
import localFont from 'next/font/local'
// 폰트 파일은 `app` 폴더 안에 함께 위치 가능.
const myFont = localFont({
src: './my-font.woff2',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}
JavaScript
복사
•
만약 로컬폰트에 여러 폰트를 적용하고 싶을 경우
const roboto = localFont({
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
],
})
JavaScript
복사