フォントの使用方法
next/fontモジュールは、フォントを自動的に最適化し、プライバシーとパフォーマンスを向上させるために外部ネットワークリクエストを削除します。
ビルトインのセルフホスティング機能により、あらゆるフォントファイルを利用できます。つまり、レイアウトシフトなしでウェブフォントを最適に読み込むことができます。
next/fontを使用するには、next/font/localまたはnext/font/googleからインポートし、適切なオプションを指定して関数として呼び出し、フォントを適用したい要素のclassNameを設定します。例：
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }) {
return (
<html className={geist.className}>
<body>{children}</body>
</html>
)
}フォントは使用されるコンポーネントにスコープされます。アプリケーション全体にフォントを適用するには、ルートレイアウトに追加します。
Googleフォント
Google Fontsを自動的にセルフホストできます。フォントは静的アセットとして含まれ、デプロイと同じドメインから提供されるため、ユーザーがサイトを訪れた際にブラウザからGoogleへのリクエストが送信されません。
Google Fontを使用するには、next/font/googleから選択したフォントをインポートします：
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}最高のパフォーマンスと柔軟性のために可変フォントを使用することを推奨します。可変フォントが使用できない場合は、ウェイトを指定する必要があります：
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}ローカルフォント
ローカルフォントを使用するには、next/font/localからフォントをインポートし、ローカルフォントファイルのsrcを指定します。フォントはpublicフォルダに保存できます。例：
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}単一のフォントファミリーに複数のファイルを使用したい場合、srcは配列にできます：
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',
},
],
})