フォントモジュール

このAPIリファレンスは、next/font/google と next/font/local の使用方法を理解するのに役立ちます。機能と使用方法については、「フォントの最適化」ページをご覧ください。

Font関数引数

使用方法については、Google Fonts および Local Fonts を参照してください。

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 で使用

• 使用するフォントが可変フォントではない場合に必須

例

• 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

フォントのsubsetsは、プリロードしたい各サブセットの名前を文字列の配列で定義します。subsets で指定されたフォントは、デフォルトでtrueである preload オプションがtrueの場合、headにリンクプリロードタグが挿入されます。

next/font/google で使用

• 任意

例

• subsets: ['latin']: サブセット latin を含む配列

すべてのサブセットのリストは、フォントのGoogle Fontsページで確認できます。

axes

一部の可変フォントには、追加の axes を含めることができます。デフォルトでは、ファイルサイズを抑えるためにフォントウェイトのみが含まれます。axes の可能な値は、特定のフォントによって異なります。

next/font/google で使用

• 任意

例

• axes: ['slnt']: こちらに示されているように、slnt を追加の axes として持つ Inter 可変フォントの場合の slnt 値を含む配列。フォントの可能な axes 値は、Google可変フォントページでフィルタを使用して wght 以外の軸を探すことで確認できます。

display

フォントのdisplayは、'auto'、'block'、'swap'、'fallback'、または 'optional' の文字列値が可能です（デフォルト値は 'swap' です）。

next/font/google および next/font/local で使用

• 任意

例

• display: 'optional': optional 値に割り当てられた文字列

preload

フォントをプリロードするかどうかを指定するBoolean値。デフォルトは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の場合: Cumulative Layout Shiftを軽減するために自動フォールバックフォントを使用するかどうかを設定するBoolean値。デフォルトはtrueです。
• next/font/localの場合: Cumulative Layout Shiftを軽減するために自動フォールバックフォントを使用するかどうかを設定する文字列またはBoolean値 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

生成される @font-face をさらに定義する、フォントフェイスのディスクリプタキーと値のペアの配列です。

next/font/localで使用

• 任意

例

• declarations: [{ prop: 'ascent-override', value: '90%' }]

スタイルの適用

フォントスタイルは3つの方法で適用できます。

• className
• style
• CSS変数

className

ロードされたフォント用の読み取り専用CSS className を返します。これはHTML要素に渡されます。

<p className={inter.className}>Hello, Next.js!</p>

style

ロードされたフォント用の読み取り専用CSS style オブジェクトを返します。これにはフォントファミリー名とフォールバックフォントにアクセスするための style.fontFamily が含まれます。

<p style={inter.style}>Hello World</p>

CSS変数

スタイルを外部スタイルシートで設定し、そこで追加オプションを指定したい場合は、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箇所でロードし、必要な場所で関連するフォントオブジェクトをインポートする必要があります。これはフォント定義ファイルを使用して行われます。

例えば、`app` ディレクトリのルートにある `styles` フォルダに `fonts.ts` ファイルを作成します。

次に、次のようにフォント定義を指定します。

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'
 
// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
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'

バージョンの変更