Font Optimization
next/font は、あなたのフォント(カスタムフォントを含む)を自動的に最適化し、プライバシーとパフォーマンスの向上のために外部ネットワーク Request を削除します。
🎥 視聴：
next/fontの使用について詳しく学びましょう → YouTube (6 分間) 。
next/font は すぐにでも フォントファイル用の組み込み自動自己ホスティングを含みます。これは、基礎となる CSS の size-adjust プロパティのおかげで、最適にウェブフォントをロードし、layout シフトをゼロにすることができるということを意味します。
この新しいフォントシステムは、パフォーマンスとプライバシーを考慮して、すべての Google Fonts を便利に使用することが可能です。CSS とフォントファイルは build の時間にダウンロードされ、他の静的アセットと一緒に自己ホストされます。ブラウザから Google への Request は送信されません。
Google Fonts
Google Font を自動的に自己ホスティングします。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。ブラウザから Google に対する Request は送信されません。
next/font/googleから使用したいフォントを関数としてインポートして始めてください。最高のパフォーマンスと柔軟性を得るために、variable fonts の使用をお勧めします。
すべてのページでフォントを使用するには、以下に示すように、_app.js ファイル にそれを追加してください。 ファイルは /pagesの下にあります:
import { Inter } from 'next/font/google'
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<main className={inter.className}>
<Component {...pageProps} />
</main>
)
}
あなたが variable フォントを使えない場合、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>
)
}
配列を使用して、複数のウェイトや styles を指定することができます:
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
})
Good to know: フォント名に複数の単語を使用する場合は、アンダースコア(_)を使用します。例えば、
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 Fonts は自動的に subset されます。これにより、 size のフォントファイルが縮小され、パフォーマンスが向上します。これらの subsets の中から、どれを preload するかを定義する必要があります。preload がtrueであるにも関わらず、任意の subsets を指定しないと、警告が表示されます。
これは、それを関数呼び出しに追加することによって実行できます：
const inter = Inter({ subsets: ['latin'] })
詳細については、Font API Reference をご覧ください。
複数のフォントを使用する
あなたはアプリケーションで複数のフォントを import して使用することができます。取れるアプローチは 2 つあります。
最初のアプローチは、フォントを export し、インポートし、必要な場所でその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, 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 variable を作成し、ご自身が好む CSS ソリューションと一緒に使用することもできます：
html {
font-family: var(--font-inter);
}
h1 {
font-family: var(--font-roboto-mono);
}
上記の例では、Interは全体に適用され、<h1>タグはすべてRoboto Monoでスタイル設定されます。
推奨事項: 新しいフォントはそれぞれが client がダウンロードしなければならない追加のリソースであるため、複数のフォントを慎重に使用してください。
Local Fonts
Import next/font/local を指定し、ローカルのフォントファイルの src を指定します。最高のパフォーマンスと柔軟性を得るために、variable fonts の使用を推奨します。
import localFont from 'next/font/local'
// Font files can be colocated inside of `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",
},
],
});
詳細については、Font API Reference をご覧ください。
With Tailwind CSS
next/fontは、Tailwind CSS とCSS variable を経由して使用することができます。
以下の例では、next/font/googleからフォントInterを使用しています(Google またはローカルフォントから任意のフォントを使用できます)。 CSS variable の名前を定義し、それをinterに割り当てるために、variableオプションを使用してフォントをロードします。その後、inter.variableを使用して、 CSS variable を HTML document に追加します。
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={`${inter.variable} font-sans`}>
<Component {...pageProps} />
</main>
)
}
最後に、CSS variable を Tailwind CSS config に追加してください：
/** @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ユーティリティクラスを使用して、要素にフォントを適用することができます。
Preloading
あなたのサイトのページでフォント機能が呼び出されると、それはすべての routes でグローバルに利用可能でプリロードされるわけではありません。むしろ、フォントはそれが使用されるファイルの type に基づいて関連するルート/ルートでのみプリロードされます。
- それが unique page なら、そのページのためのユニークな route に予め読み込まれています
- それが custom App にある場合、すべての routes のサイトの
/pages以下に事前に読み込まれています。
Reusing fonts
localFontまたは Google フォント機能を呼び出すたびに、そのフォントはあなたのアプリケーションで 1 つのインスタンスとしてホストされます。したがって、同じフォント機能を複数のファイルでロードすると、同じフォントの複数のインスタンスがホストされます。この状況では、以下のことを推奨します：
- 共有ファイルの中でフォントの loader 関数を呼び出す
- それを Export として定数で出力します
- このフォントを使用したい各ファイルで Import 定数をインポートしてください