Fontモジュール
この API リファレンスは、next/font/google
とnext/font/local
の使い方を理解するのに役立ちます。機能や使い方については、フォントの最適化ページを参照してください。
Font 関数の引数
使用方法については、Google FontsとLocal Fontsを参照してください。
Key | font/google | font/local | 型 | 必須 |
---|---|---|---|---|
src | × | ✅ | String または Object の配列 | Yes |
weight | ✅ | ✅ | String または 配列 | Required/Optional |
style | ✅ | ✅ | String または 配列 | - |
subsets | ✅ | × | String 配列 | - |
axes | ✅ | × | String 配列 | - |
display | ✅ | ✅ | String | - |
preload | ✅ | ✅ | Boolean | - |
fallback | ✅ | ✅ | String 配列 | - |
adjustFontFallback | ✅ | ✅ | Boolean または String | - |
variable | ✅ | ✅ | String | - |
declarations | × | ✅ | Object 配列 | - |
src
フォントファイルのパス。文字列、またはオブジェクトの配列(Array<{path: string, weight?: string, style?: string}>
型)として、フォントローダ関数が呼び出されたディレクトリからの相対パス。
next/font/local
で使用:
- 必須
例:
app
ディレクトリ内のfonts
というディレクトリにmy-font.woff2
が置かれた場合、src:'./fonts/my-font.woff2'
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
で使用:
- 使用するフォントが可変でない場合は必須
例:
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'
の文字列値。 - フォントが可変の 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
プリロードさせたい各サブセットの名前を文字列値の配列で定義したフォントサブセット。サブセットを通じて指定されたフォントは、preload
オプションがtrue
(デフォルト)のときは、リンクpreload
タグが head に注入されます。
next/font/google
で使用:
- 任意
例:
subset: ['latin']
:サブセットlatin
を含む配列
すべてのサブセットの一覧は、フォントの Google Fonts ページで見ることができます
axes
一部の可変フォントには、axes
を含められるものがあります。デフォルトでは、フォントのウェイトだけが含まれています。可能なaxes
の値は特定のフォントに依存します。
next/font/google
で使用:
- オプション
例:
axes: ['slnt']
:ここで示されているように、追加のaxes
としてslnt
を持つ可変フォントInter
に対する、値slnt
を持つ配列。Google 可変フォントのページでフィルタを使い、wght
以外の axes を探すことで、使用するフォントに使用可能なaxes
の値を見つけることができます。
display
フォントのdisplayを指定し、文字列値として'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
の場合:累積レイアウトシフトを軽減するために自動で予備フォントを用いるかどうかを設定する文字列または論理値。とりうる値は'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
生成された@font-face
をさらに定義するフォントフェイス・ディスクリプタのキーと値のペアの配列。
next/font/local
で使用
- 任意
例:
declarations: [{ prop: 'ascent-override', value: '90%' }]
スタイルの適用
フォントスタイルは 3 つの方法で適用できます:
className
HTML 要素に渡す、読み込んだフォントの CSS className
を読み込み専用で返します。
<p className={inter.className}>Hello, Next.js!</p>
style
HTML 要素に渡される、読み込まれたフォントの読み取り専用の CSSstyle
オブジェクトを返します。フォントファミリー名とフォールバックフォントにアクセスするためのstyle.fontFamily
を含みます。
<p style={inter.style}>Hello World</p>
CSS 変数
外部スタイル・シートにスタイルを設定し、そこに追加オプションを指定したい場合は、CSS 変数によるスタイリングを使用します。
フォントをインポートするだけでなく、CSS 変数が定義されている CSS ファイルをインポートし、フォント・ローダーオブジェクトの変数オプションを以下のように設定します:
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 つの場所でフォントをロードし、必要な場所で関連するフォントオブジェクトをインポートする必要があります。これは、フォント定義ファイルを使って行います。
例えば、App ディレクトリのルートにある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 |
---|---|
v13.2.0 | @next/font をnext/font に変更。インストールが不要になりました。 |
v13.0.0 | next/font 追加 |