Menu

フォント最適化

next/font は自動的にフォント（カスタムフォントを含む）を最適化し、プライバシーとパフォーマンスを向上させるための外部ネットワークリクエストを削除します。

🎥 動画： next/font の使用について詳しく学ぶ → YouTube (6分)。

next/font には、あらゆる フォントファイルに対する 組み込みの自動セルフホスティング が含まれています。これにより、使用される基盤のCSS size-adjust プロパティのおかげで、レイアウトシフトなしで最適にウェブフォントを読み込むことができます。

この新しいフォントシステムでは、パフォーマンスとプライバシーを考慮して、すべてのGoogle Fontsを便利に使用できます。CSSとフォントファイルはビルド時にダウンロードされ、他の静的アセットと一緒にセルフホストされます。ブラウザからGoogleへのリクエストは送信されません。

Google Fonts

任意のGoogle Fontを自動的にセルフホストします。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。ブラウザからGoogleへのリクエストは送信されません。

使用したいフォントを next/font/google から関数としてインポートすることで始めます。最高のパフォーマンスと柔軟性を得るために、可変フォントの使用をお勧めします。

すべてのページでフォントを使用するには、以下に示すように /pages 配下の _app.js ファイルに追加します：

pages/_app.js
import { Inter } from 'next/font/google'
 
// 可変フォントを読み込む場合、フォントウェイトを指定する必要はありません
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

可変フォントを使用できない場合、ウェイトを指定する必要があります：

pages/_app.js
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>
  )
}

配列を使用して、複数のウェイトやスタイルを指定できます：

app/layout.js
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

補足: 複数の単語からなるフォント名には、アンダースコア（_）を使用します。例：Roboto Mono は Roboto_Mono としてインポートします。

<head> にフォントを適用する

ラッパーと className を使用せずに、以下のように <head> 内にフォントを挿入することもできます：

pages/_app.js
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} />
    </>
  )
}

単一ページでの使用

特定のページでフォントを使用するには、以下に示すように、そのページに追加します：

pages/index.js
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は自動的にサブセット化されます。これによりフォントファイルのサイズが縮小され、パフォーマンスが向上します。プリロードするサブセットを定義する必要があります。preloadが true の場合にサブセットを指定しないと、警告が表示されます。

これは関数呼び出しに追加することで行えます：

pages/_app.js
const inter = Inter({ subsets: ['latin'] })

詳細については、フォントAPIリファレンスを参照してください。

複数のフォントの使用

アプリケーション内で複数のフォントをインポートして使用できます。アプローチは2つあります。

最初のアプローチは、フォントをエクスポートするユーティリティ関数を作成し、それをインポートして必要な場所に className を適用することです。これにより、レンダリングされた場合にのみフォントがプリロードされます：

app/fonts.ts
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',
})
app/fonts.js
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の変数を作成し、お好みのCSSソリューションで使用することもできます：

app/global.css
html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}

上記の例では、Interがグローバルに適用され、すべての<h1>タグがRoboto Monoでスタイル設定されます。

推奨事項：各新しいフォントはクライアントがダウンロードする必要がある追加リソースであるため、複数のフォントは控えめに使用してください。

ローカルフォント

next/font/localをインポートし、ローカルフォントファイルのsrcを指定します。最高のパフォーマンスと柔軟性のために、可変フォントの使用をお勧めします。

pages/_app.js
import localFont from 'next/font/local'
 
// フォントファイルは`pages`内に配置できます
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

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 リファレンスをご覧ください。

Tailwind CSSと共に

next/fontは、CSSの変数を通じてTailwind CSSで使用できます。

以下の例では、next/font/googleからInterフォントを使用します（Google またはローカルフォントから任意のフォントを使用できます）。variableオプションでCSSの変数名を定義し、interに割り当てます。次に、inter.variableを使用してHTMLドキュメントにCSSの変数を追加します。

pages/_app.js
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の変数をTailwind CSS の設定に追加します：

tailwind.config.js
/** @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のユーティリティクラスを使用して、要素にフォントを適用できます。

プリロード

サイトのページでフォント関数が呼び出されると、それはグローバルに利用可能になったり、すべてのルートで事前読み込みされるわけではありません。むしろ、フォントは使用されているファイルの種類に基づいて関連するルートで事前読み込みされます：

  • 固有のページの場合、そのページの固有のルートで事前読み込みされます
  • カスタムAppの場合、/pages下のサイトのすべてのルートで事前読み込みされます

フォントの再利用

localFontまたはGoogleフォント関数を呼び出すたびに、そのフォントはアプリケーション内で1つのインスタンスとしてホストされます。したがって、複数のファイルで同じフォント関数を読み込むと、同じフォントの複数のインスタンスがホストされます。このような状況では、以下をお勧めします：

  • フォントローダー関数を1つの共有ファイルで呼び出す
  • それを定数としてエクスポートする
  • このフォントを使用したい各ファイルでその定数をインポートする