Font Module
next/font は、フォント（カスタムフォントを含む）を自動的に最適化し、プライバシーとパフォーマンス向上のため外部ネットワークリクエストを削除します。
組み込みの自動セルフホスティング機能が含まれており、任意のフォントファイルに対応しています。これにより、レイアウトシフトなしで最適にウェブフォントを読み込むことができます。
さらに、すべての Google Fonts を便利に使用できます。CSS とフォントファイルはビルド時にダウンロードされ、他の静的アセットと共にセルフホストされます。ブラウザから 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>
)
}🎥 参照:
next/fontの詳細情報を学習する → YouTube (6 minutes)。
Reference
| Key | font/google | font/local | Type | Required |
|---|---|---|---|---|
src | String or Array of Objects | Yes | ||
weight | String or Array | Required/Optional | ||
style | String or Array | - | ||
subsets | Array of Strings | - | ||
axes | Array of Strings | - | ||
display | String | - | ||
preload | Boolean | - | ||
fallback | Array of Strings | - | ||
adjustFontFallback | Boolean or String | - | ||
variable | String | - | ||
declarations | Array of Objects | - |
src
フォントファイルのパスを文字列、または Array<{path: string, weight?: string, style?: string}> 型のオブジェクト配列として指定します。フォントローダー関数が呼び出されるディレクトリを基準とした相対パスです。
next/font/local で使用される項目
- 必須
例：
src:'./fonts/my-font.woff2'ここでmy-font.woff2はappディレクトリ内のfontsという名前のディレクトリに配置されていますsrc:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]- フォントローダー関数が
app/page.tsxでsrc:'../styles/fonts/my-font.ttf'を使用して呼び出される場合、my-font.ttfはプロジェクトのルートのstyles/fontsに配置されます
weight
フォント weight は以下の可能性があります。
- 特定のフォント利用可能なウェイトの値、または 可変 フォントの場合は値の範囲を表す文字列
- フォントが 可変 Google フォント でない場合のウェイト値の配列。
next/font/googleにのみ適用されます。
next/font/google および next/font/local で使用される項目
- フォントが 可変でない 場合は必須 variable
例：
weight: '400'：単一のウェイト値の文字列 - フォントInterの場合、可能な値は'100'、'200'、'300'、'400'、'500'、'600'、'700'、'800'、'900'、または'variable'です（'variable'がデフォルト）weight: '100 900'：可変フォント用の100から900の範囲を表す文字列weight: ['100','400','900']：可変でないフォント用の 3 つの可能な値の配列
style
フォント style は以下の可能性があります。
- デフォルト値が
'normal'の文字列 value - フォントが 可変 Google フォント でない場合のスタイル値の配列。
next/font/googleにのみ適用されます。
next/font/google および next/font/local で使用される項目
- オプション
例：
style: 'italic'：文字列 -next/font/googleではnormalまたはitalicを指定できますstyle: 'oblique'：文字列 -next/font/localではあらゆる値を指定できますが、標準フォントスタイル から取得されることが期待されますstyle: ['italic','normal']：next/font/google用の 2 つの値の配列 - 値はnormalとitalicから選択されます
subsets
フォント subsets を、プリロードしたい各サブセットの名前を含む文字列配列で定義します。subsets で指定されたフォントは、preload オプションが true の場合（デフォルト）、head に preload リンクタグが挿入されます。
next/font/google で使用される項目
- オプション
例：
subsets: ['latin']：サブセットlatinを含む配列
すべてのサブセットのリストは、フォントの Google Fonts ページで確認できます。
axes
一部の可変フォントには、含めることができる追加の axes があります。デフォルトでは、ファイルサイズを削減するため、フォントウェイトのみが含まれます。axes の可能な値は、特定のフォントによって異なります。
next/font/google で使用される項目
- オプション
例：
axes: ['slnt']：Inter可変フォント用の値slntを含む配列。slntが追加のaxesとして ここ に表示されています。フォント用の可能なaxes値は、Google 可変フォントページ でフィルターを使用して、wght以外の axes を探すことで確認できます
display
フォント display は、可能な文字列 values として 'auto'、'block'、'swap'、'fallback'、または 'optional' を指定でき、デフォルト値は 'swap' です。
next/font/google および next/font/local で使用される項目
- オプション
例：
display: 'optional'：optional値に割り当てられた文字列
preload
フォントを プリロード するかどうかを指定するブール値です。デフォルトは true です。
next/font/google および next/font/local で使用される項目
- オプション
例：
preload: false
fallback
フォントが読み込めない場合に使用するフォールバックフォント。デフォルトはありません。フォールバックフォントの文字列配列です。
- オプション
next/font/google および next/font/local で使用される項目
例：
fallback: ['system-ui', 'arial']：フォールバックフォントをsystem-uiまたはarialに設定する配列
adjustFontFallback
next/font/googleの場合：自動フォールバックフォントを使用して 累積レイアウトシフト を削減するかどうかを設定するブール値です。デフォルトはtrueです。next/font/localの場合：自動フォールバックフォントを使用して 累積レイアウトシフト を削減するかどうかを設定する文字列またはブール値falseです。可能な値は'Arial'、'Times New Roman'、またはfalseです。デフォルトは'Arial'です。
next/font/google および next/font/local で使用される項目
- オプション
例：
adjustFontFallback: false：next/font/googleの場合adjustFontFallback: 'Times New Roman'：next/font/localの場合
variable
CSS 変数メソッドでスタイルが適用される場合に使用する CSS 変数名を定義する文字列値です。
next/font/google および next/font/local で使用される項目
- オプション
例：
variable: '--my-font'：CSS 変数--my-fontが宣言されます
declarations
フォントフェイス descriptor キーと値のペアの配列です。生成された @font-face をさらに定義します。
next/font/local で使用される項目
- オプション
例：
declarations: [{ prop: 'ascent-override', value: '90%' }]
Examples
Google Fonts
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'] })詳細情報は Font API Reference を参照してください。
複数のフォントを使用する
アプリケーションで複数のフォントをインポートして使用できます。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 Reference を参照してください。
Tailwind CSS との連携
next/font は CSS 変数を使用して Tailwind CSS とシームレスに統合されます。
以下の例では、next/font/google から Inter および Roboto_Mono フォント（任意の Google Font またはローカルフォントを使用できます）を使用します。variable オプションを使用して CSS 変数名（これらのフォント用に inter および roboto_mono など）を定義します。その後、inter.variable および roboto_mono.variable を適用して、HTML ドキュメント内に CSS 変数を含めます。
補足：これらの変数は、お好みに応じて、スタイリングニーズ、またはプロジェクト要件に基づいて、
<html>または<body>タグに追加できます。
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} antialiased`}
>
<body>{children}</body>
</html>
)
}最後に、CSS 変数を Tailwind CSS config に追加します。
@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>スタイルの適用
フォントスタイルは 3 つの方法で適用できます。
className
読み込まれたフォントの読み取り専用 CSS className を返します。これは HTML 要素に渡されます。
<p className={inter.className}>Hello, Next.js!</p>style
読み込まれたフォットの読み取り専用 CSS style オブジェクトを返します。style.fontFamily でフォントファミリー名とフォールバックフォントにアクセスできます。これは HTML 要素に渡されます。
<p style={inter.style}>Hello World</p>CSS Variables
外部スタイルシートでスタイルを設定し、そこで追加オプションを指定する場合は、CSS 変数メソッドを使用します。
フォントのインポートに加えて、CSS 変数が定義される CSS ファイルをインポートし、フォントローダーオブジェクトの variable オプションを以下のように設定します。
import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'
const inter = Inter({
variable: '--font-inter',
})フォントを使用するには、スタイルしたテキストの親コンテナの className をフォントローダーの variable 値に設定し、テキストの className を外部 CSS ファイルの styles プロパティに設定します。
<main className={inter.variable}>
<p className={styles.text}>Hello World</p>
</main>component.module.css CSS ファイルで text セレクタークラスを以下のように定義します。
.text {
font-family: var(--font-inter);
font-weight: 200;
font-style: italic;
}上記の例では、テキスト「Hello World」は Inter フォントと生成されたフォントフォールバックを使用して、font-weight: 200 および font-style: italic でスタイルされています。
フォント定義ファイルの使用
localFont または Google フォント関数を呼び出すたびに、そのフォントはアプリケーション内の 1 つのインスタンスとしてホストされます。したがって、複数の場所で同じフォントを使用する必要がある場合は、1 つの場所で読み込み、必要な場所でそれに関連するフォントオブジェクトをインポートする必要があります。これはフォント定義ファイルを使用して実行されます。
例として、アプリディレクトリのルートにある styles フォルダに fonts.ts ファイルを作成します。
その後、フォント定義を以下のように指定します。
import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'
// 可変フォントを定義します
const inter = Inter()
const lora = Lora()
// 可変でないフォントの 2 つのウェイトを定義します
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// GreatVibes-Regular.ttf が styles フォルダに保存されているカスタムローカルフォントを定義します
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }これらの定義をコード内で以下のように使用できます。
import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
export default function Page() {
return (
<div>
<p className={inter.className}>Hello world using Inter font</p>
<p style={lora.style}>Hello world using Lora font</p>
<p className={sourceCodePro700.className}>
Hello world using Source_Sans_3 font with weight 700
</p>
<p className={greatVibes.className}>My title in Great Vibes font</p>
</div>
)
}コード内のフォント定義へのアクセスを簡単にするために、tsconfig.json または jsconfig.json ファイルでパスエイリアスを定義できます。
{
"compilerOptions": {
"paths": {
"@/fonts": ["./styles/fonts"]
}
}
}これで、フォント定義を以下のようにインポートできます。
import { greatVibes, sourceCodePro400 } from '@/fonts'プリロード
フォント関数がサイトのページで呼び出される場合、グローバルに利用可能または全ルートでプリロードされません。むしろ、フォントはそれが使用されるファイルのタイプに基づいて関連ルートのみでプリロードされます。
- ユニークなページの場合、そのページのユニークなルートでプリロードされます。
- レイアウトの場合、レイアウトでラップされたすべてのルートでプリロードされます。
- ルートレイアウトの場合、すべてのルートでプリロードされます。
Version Changes
| Version | Changes |
|---|---|
v13.2.0 | @next/font は next/font に名前変更されました。インストールは不要になりました。 |
v13.0.0 | @next/font が追加されました。 |