Font Module

この API reference は、next/font/google と next/font/local の使用方法を理解するのに役立ちます。機能と使用法については、Optimizing Fonts ページをご覧ください。

フォント機能の引数

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

src

フォントファイルの loader を string または objects の配列(type Array<{path: string, weight?: string, style?: string}>)として、フォントのローダー関数が呼び出されるディレクトリへの相対 path 。

next/font/local で使用される

• Required

Examples:

• 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で loader フォント関数がsrc:'../styles/fonts/my-font.ttf'を用いて呼び出された場合、それによりmy-font.ttfはプロジェクトの root 内に存在するstyles/fontsの中に置かれます。

weight

次の可能性を持つフォント weight :

• 特定のフォント用の利用可能な重さの可能な値、または variable フォントの場合は値の範囲を持つ string という
• フォントが variable google font でない場合の weight 値の配列です。これはnext/font/googleにのみ適用されます。

next/font/googleとnext/font/localで使用されます

• 使用されているフォントが variable で ない 場合に必要です。

Examples:

• weight: '400' : 単一の weight value のための string - フォント Inter の場合、可能な値は '100'、'200'、'300'、'400'、'500'、'600'、'700'、'800'、'900'または'variable'で、'variable'は default です
• weight: '100 900': variable フォントのための 100 から 900 までの範囲を示す string
• weight: ['100','400','900']：非 variable フォントの 3 つの可能性のある値の配列

style

次の可能性を持つフォント style ：

• default default value が'normal'の string value
• フォントが variablegoogle フォント でない場合の style 値の配列です。これは next/font/google にのみ適用されます。

next/font/googleとnext/font/localで使用されます

• Optional

Examples:

• style: 'italic': string という文字列 - これは、next/font/googleに関してnormalまたはitalicにできます。
• style: 'oblique': string - これはあらゆる value を next/font/local にできますが、標準フォントの styles から来ることが期待されています。
• style: ['italic','normal']: next/font/googleに対する 2 つの値の配列 - 値はnormalとitalicから来ています

subsets

フォントは、事前にロードしたい各サブセットの名前を含む string 値の配列で定義された subsets です。 subsets経由で指定されたフォントは、 head に link preload タグが挿入され、preload オプションが true 、つまり default の場合にそのタグが挿入されます。

next/font/googleで使用される

• Optional

Examples:

• subsets: ['latin']: latinという部分集合を含む配列

あなたのフォントの Google Fonts ページで、すべての subsets のリストを見つけることができます。

axes

一部の variable フォントには、含めることができる追加のaxesがあります。default では、ファイル サイズを抑えるために、フォント weight のみが含まれます。 axesの可能な values は、特定のフォントによります。

next/font/googleで使用される

• Optional

Examples:

• axes: ['slnt']：Inter variable フォントに追加のaxesとしてslntがあることをここ で示している配列で、 value slntが含まれています。あなたのフォントに対する可能なaxesの値は、Google variable fonts page のフィルターを使用して探し、wght以外の axes を探すことで見つけることができます

display

display というフォントは、'auto'、'block'、'swap'、'fallback'、'optional' の可能な string 値 を持ち、default value は'swap'です。

next/font/google と next/font/localで使用されます

• Optional

Examples:

• display: 'optional': optional の value に割り当てられる string

preload

フォントが preloaded するべきかどうかを指定する boolean value。default はtrueです。

next/font/googleとnext/font/localで使用されます

• Optional

Examples:

• preload: false

fallback

フォントがロードできない場合に使用する fallback フォント。default のない fallback フォントの文字列の配列。

• Optional

next/font/googleとnext/font/localで使用されます

Examples:

• fallback: ['system-ui', 'arial']： fallback フォントをsystem-uiまたはarialに設定する配列

adjustFontFallback

• next/font/googleについて：自動的に fallback フォントを使用して Cumulative Layout Shift を減らすかどうかを設定する boolean value。 default はtrueです。
• next/font/localについて：自動的な fallback フォントを使用して Cumulative Layout Shift を軽減すべきかどうかを設定する string または boolean のfalse value。可能な値は'Arial'、'Times New Roman'またはfalseです。default は'Arial'です。

next/font/google と next/font/localで使用されます

• Optional

Examples:

• adjustFontFallback: false: これは next/font/google 用です
• adjustFontFallback: 'Times New Roman': next/font/localのために

variable

string value は、CSS variable method で style が適用される場合に使用する CSS variable の名前を定義するためのものです。

next/font/google と next/font/localで使用されます

• Optional

Examples:

• variable: '--my-font': CSS variable --my-font が宣言されました

declarations

生成される@font-faceをさらに定義するフォントフェイス記述子 のキー・バリューペアの配列。

next/font/local で使用される

• Optional

Examples:

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

Applying Styles

フォントの styles は 3 つの方法で適用できます：

• className
• style
• CSS 変数

className

ロードされたフォントに渡すための読み取り射程の CSS className を返します。これをある HTML 要素へ渡します。

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

style

ロードされたフォントのための読み取り専用の CSS style object を返し、style.fontFamily を含む、フォントファミリー名と fallback フォントへのアクセスを HTML エレメントに渡します。

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

CSS 変数

あなたが外部の style シートに styles を設定し、さらにそこで追加の options を指定したい場合は、 CSS variable method を使用してください。

フォントをインポートするだけでなく、CSS ファイルも import し、CSS variable が定義され、フォントの loader object の variable オプションを次のように設定します:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

フォントを使用するには、テキストの親のclassNameを、あなたが style を適用したい container のフォントローダーのvariableの value に設定し、 テキストのclassNameを外部の CSS ファイルからのstylesプロパティに設定します。

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

<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フォントと生成されたフォント fallback を用いてスタイルが適用されており、font-weight: 200とfont-style: italicが使用されています。

Using a font definitions file

localFontや Google フォント関数を呼び出す度に、そのフォントはあなたのアプリケーション内で一つのインスタンスとしてホストされます。よって、同じフォントを複数箇所で使用する必要がある場合は、一箇所でロードし、必要な場所で関連するフォントの object を import するべきです。これはフォント定義ファイルを使用して行われます。

たとえば、あなたの app ディレクトリの root に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, 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 }

これらの定義を次のようにあなたの code で使用することができます：

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>
  )
}

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>
  )
}

あなたの code でフォント定義にアクセスしやすくするために、tsconfig.jsonまたはjsconfig.jsonファイルで path エイリアスを定義できます。以下に示します：

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

あなたは今、以下のように任意のフォント定義を import できるようになりました：

import { greatVibes, sourceCodePro400 } from '@/fonts'

import { greatVibes, sourceCodePro400 } from '@/fonts'

Version Changes