フォント最適化
next/font
は自動的にフォント(カスタムフォントを含む)を最適化し、プライバシーとパフォーマンスを向上させるための外部ネットワークリクエストを削除します。
🎥 動画:
next/font
の使用について詳しく学ぶ → YouTube (6分)。
next/font
には、あらゆる フォントファイルに対する 組み込みの自動セルフホスティング が含まれています。これにより、使用される基盤のCSS size-adjust
プロパティのおかげで、レイアウトシフトなしで最適にウェブフォントを読み込むことができます。
この新しいフォントシステムでは、パフォーマンスとプライバシーを考慮して、すべてのGoogle Fontsを便利に使用できます。CSSとフォントファイルはビルド時にダウンロードされ、他の静的アセットと一緒にセルフホストされます。ブラウザからGoogleへのリクエストは送信されません。
Google Fonts
任意のGoogle Fontを自動的にセルフホストします。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。ブラウザからGoogleへのリクエストは送信されません。
使用したいフォントを next/font/google
から関数としてインポートすることで始めます。最高のパフォーマンスと柔軟性を得るために、可変フォントの使用をお勧めします。
import { Inter } from 'next/font/google'
// 可変フォントを読み込む場合、フォントウェイトを指定する必要はありません
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}
可変フォントを使用できない場合、ウェイトを指定する必要があります:
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}
配列を使用して、複数のウェイトやスタイルを指定できます:
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
})
補足: 複数の単語からなるフォント名には、アンダースコア(_)を使用します。例:
Roboto Mono
はRoboto_Mono
としてインポートします。
サブセットの指定
Google Fontsは自動的にサブセット化されます。これによりフォントファイルのサイズが縮小され、パフォーマンスが向上します。プリロードするサブセットを定義する必要があります。preload
が true
の場合にサブセットを指定しないと、警告が表示されます。
これは関数呼び出しに追加することで行えます:
const inter = Inter({ subsets: ['latin'] })
詳細については、フォントAPIリファレンスを参照してください。
複数のフォントの使用
アプリケーション内で複数のフォントをインポートして使用できます。アプローチは2つあります。
最初のアプローチは、フォントをエクスポートするユーティリティ関数を作成し、それをインポートして必要な場所に 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',
})
import { inter } from './fonts'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={inter.className}>
<body>
<div>{children}</div>
</body>
</html>
)
}
import { roboto_mono } from './fonts'
export default function Page() {
return (
<>
<h1 className={roboto_mono.className}>My page</h1>
</>
)
}
上記の例では、Inter
がグローバルに適用され、Roboto Mono
は必要に応じてインポートおよび適用できます。
別の方法として、CSSの変数を作成し、お好みのCSSソリューションで使用することもできます:
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>
)
}
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'
// フォントファイルは`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>
)
}
1つのフォントファミリーに複数のファイルを使用する場合、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',
},
],
})
詳細については、Font API リファレンスをご覧ください。
Tailwind CSSと共に
next/font
は、CSSの変数を通じてTailwind CSSで使用できます。
以下の例では、next/font/google
からInter
フォントを使用します(Google またはローカルフォントから任意のフォントを使用できます)。variable
オプションでCSSの変数名を定義し、inter
に割り当てます。次に、inter.variable
を使用してHTMLドキュメントにCSSの変数を追加します。
import { Inter, Roboto_Mono } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
const roboto_mono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto-mono',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
<body>{children}</body>
</html>
)
}
最後に、CSSの変数をTailwind CSS の設定に追加します:
/** @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
のユーティリティクラスを使用して、要素にフォントを適用できます。
プリロード
サイトのページでフォント関数が呼び出されると、それはグローバルに利用可能になったり、すべてのルートで事前読み込みされるわけではありません。むしろ、フォントは使用されているファイルの種類に基づいて関連するルートで事前読み込みされます:
- 固有のページの場合、そのページの固有のルートで事前読み込みされます。
- レイアウトの場合、そのレイアウトでラップされているすべてのルートで事前読み込みされます。
- ルートレイアウトの場合、すべてのルートで事前読み込みされます。
フォントの再利用
localFont
またはGoogleフォント関数を呼び出すたびに、そのフォントはアプリケーション内で1つのインスタンスとしてホストされます。したがって、複数のファイルで同じフォント関数を読み込むと、同じフォントの複数のインスタンスがホストされます。このような状況では、以下をお勧めします:
- フォントローダー関数を1つの共有ファイルで呼び出す
- それを定数としてエクスポートする
- このフォントを使用したい各ファイルでその定数をインポートする