フォント最適化
next/fontは自動的にフォントを最適化し（カスタムフォントを含む）、プライバシーとパフォーマンス向上のための外部ネットワークリクエストを排除します。
🎥 視聴する：
next/fontの使用方法について詳しく学ぶ → YouTube（6分）。
next/fontには任意のフォントファイルに対する組み込みの自動セルフホスティング機能が含まれています。これにより、基盤となるCSS size-adjustプロパティのおかげで、レイアウトシフトなしでウェブフォントを最適にロードできます。
この新しいフォントシステムでは、パフォーマンスとプライバシーを考慮しながら、すべてのGoogleフォントを便利に使用することもできます。CSSとフォントファイルはビルド時にダウンロードされ、他の静的アセットとともにセルフホストされます。ブラウザからGoogleへのリクエストは一切送信されません。
Googleフォント
任意のGoogleフォントを自動的にセルフホストします。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから配信されます。ブラウザからGoogleへのリクエストは一切送信されません。
使用したいフォントをnext/font/googleから関数としてインポートすることから始めましょう。最高のパフォーマンスと柔軟性のために可変フォントを使用することをお勧めします。
すべてのページでフォントを使用するには、/pagesの下にある_app.jsファイルに以下のように追加します：
import { Inter } from 'next/font/google'
// 可変フォントを読み込む場合、フォントの太さを指定する必要はありません
const inter = Inter({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<main className={inter.className}>
<Component {...pageProps} />
</main>
)
}可変フォントを使用できない場合は、weight（太さ）を指定する必要があります：
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={roboto.className}>
<Component {...pageProps} />
</main>
)
}配列を使用して、複数のウェイトやスタイルを指定できます：
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
})補足：複数の単語からなるフォント名にはアンダースコア（_）を使用します。例：
Roboto MonoはRoboto_Monoとしてインポートします。
フォントを<head>に適用する
以下のように、ラッパーやclassNameを使わずに<head>内にフォントを注入することもできます：
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<>
<style jsx global>{`
html {
font-family: ${inter.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</>
)
}単一ページでの使用
特定のページだけでフォントを使用するには、以下のように追加します：
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<div className={inter.className}>
<p>Hello World</p>
</div>
)
}サブセットの指定
Googleフォントは自動的にサブセット化されます。これによりフォントファイルのサイズが縮小され、パフォーマンスが向上します。使用するサブセットを定義する必要があります。preloadがtrueの場合にサブセットを指定しないと警告が表示されます。
これは関数呼び出しに追加することで行えます：
const inter = Inter({ subsets: ['latin'] })詳細についてはフォントAPIリファレンスを参照してください。
複数のフォントの使用
アプリケーションで複数のフォントをインポートして使用できます。2つのアプローチがあります。
1つ目のアプローチは、フォントをエクスポートするユーティリティ関数を作成し、それをインポートして必要な場所でclassNameを適用することです。これにより、フォントはレンダリングされたときにのみプリロードされます：
import { Inter, Roboto_Mono } from 'next/font/google'
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export const roboto_mono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
})上記の例では、Interがグローバルに適用され、Roboto Monoが必要に応じてインポートして適用できます。
あるいは、CSS変数を作成し、お好みのCSSソリューションで使用することもできます：
html {
font-family: var(--font-inter);
}
h1 {
font-family: var(--font-roboto-mono);
}上記の例では、Interがグローバルに適用され、すべての<h1>タグはRoboto Monoでスタイリングされます。
推奨事項：新しいフォントはそれぞれクライアントがダウンロードする追加リソースとなるため、複数のフォントの使用は控えめにしましょう。
ローカルフォント
next/font/localをインポートし、ローカルフォントファイルのsrcを指定します。最高のパフォーマンスと柔軟性のために可変フォントを使用することをお勧めします。
import localFont from 'next/font/local'
// フォントファイルは`pages`内に配置できます
const myFont = localFont({ src: './my-font.woff2' })
export default function MyApp({ Component, pageProps }) {
return (
<main className={myFont.className}>
<Component {...pageProps} />
</main>
)
}単一のフォントファミリーに複数のファイルを使用したい場合、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',
},
],
})詳細についてはフォントAPIリファレンスを参照してください。
Tailwind CSSとの連携
next/fontはCSS変数を使ってTailwind CSSとシームレスに統合できます。
以下の例では、next/font/googleからInterとRoboto_Monoフォントを使用しています（任意のGoogleフォントまたはローカルフォントを使用できます）。variableオプションを使用してCSS変数名を定義し、それぞれのフォントに対してinterとroboto_monoのような名前を付けます。次に、inter.variableとroboto_mono.variableを適用して、HTMLドキュメントにCSS変数を含めます。
補足：これらの変数は、お好みやスタイリングのニーズ、プロジェクトの要件に応じて、
<html>または<body>タグに追加できます。
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
const roboto_mono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto-mono',
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={`${inter.variable} ${roboto_mono.variable} font-sans`}>
<Component {...pageProps} />
</main>
)
}最後に、Tailwind CSS設定にCSS変数を追加します：
Tailwind CSS v4
Tailwind v4では、デフォルトで設定は必要ありません。Tailwindを設定する必要がある場合は、グローバルCSSファイルを設定するための公式ドキュメントに従ってください。
@import "tailwindcss";
@theme inline {
--font-sans: var(--font-inter);
--font-mono: var(--font-roboto-mono);
}Tailwind CSS v3
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)'],
mono: ['var(--font-roboto-mono)'],
},
},
},
plugins: [],
}これでfont-sansとfont-monoのユーティリティクラスを使用して、要素にフォントを適用できます。
<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>
プリロード
フォント関数がサイトのページで呼び出された場合、そのフォントはグローバルに利用可能になったり、すべてのルートでプリロードされたりするわけではありません。むしろ、フォントは使用されているファイルのタイプに基づいて、関連するルートでのみプリロードされます：
フォントの再利用
localFontまたはGoogleフォント関数を呼び出すたびに、そのフォントはアプリケーション内の1つのインスタンスとしてホストされます。したがって、同じフォント関数を複数のファイルでロードすると、同じフォントの複数のインスタンスがホストされることになります。このような状況では、次のことをお勧めします：
- フォントローダー関数を1つの共有ファイルで呼び出す
- それを定数としてエクスポートする
- このフォントを使用したい各ファイルに定数をインポートする