フォントの最適化

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

🎥 視聴する: next/font の使用方法について詳しく学ぶ → YouTube (6分)。

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

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

Google Fonts

あらゆるGoogle Fontsを自動的にセルフホストします。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。ブラウザからGoogleにリクエストが送信されることはありません。

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

app/layout.tsx

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
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>
  )
}

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

app/layout.tsx

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

配列を使用することで、複数のウェイトやスタイルを指定できます

app/layout.js

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

ヒント: 複数の単語からなるフォント名にはアンダースコア (_) を使用します。例: Roboto Mono は Roboto_Mono としてインポートする必要があります。

サブセットの指定

Google Fontsは自動的にサブセット化されます。これにより、フォントファイルのサイズが削減され、パフォーマンスが向上します。これらのサブセットのうち、どれをプリロードするかを定義する必要があります。preload が true の場合にサブセットを指定しないと、警告が表示されます。

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

app/layout.tsx

const inter = Inter({ subsets: ['latin'] })

詳細については、Font 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/layout.tsx

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

app/page.tsx

import { roboto_mono } from './fonts'
 
export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

上記の例では、Inter がグローバルに適用され、Roboto Mono は必要に応じてインポートして適用できます。

あるいは、CSS変数を作成し、お好みのCSSソリューションで使用することもできます。

app/layout.tsx

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

app/global.css

html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}

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

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

ローカルフォント

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

app/layout.tsx

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `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>
  )
}

単一のフォントファミリーに複数のファイルを使用したい場合、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 は、Tailwind CSS と CSS変数を介して使用できます。

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

app/layout.tsx

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}`}>
      <body>{children}</body>
    </html>
  )
}

最後に、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 ユーティリティクラスを使用して、要素にフォントを適用できるようになります。

プリロード

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

それがユニークなページである場合、そのページの一意なルートでプリロードされます。
それがレイアウトである場合、そのレイアウトによってラップされたすべてのルートでプリロードされます。
それがルートレイアウトである場合、すべてのルートでプリロードされます。

フォントの再利用

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

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