フォントの最適化

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

🎥 動画：next/font の使用方法の詳細はこちら → YouTube (6分)。

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

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

Googleフォント

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

next/font/googleから使用したいフォントを関数としてインポートして開始します。可変フォントを使用することをお勧めします。パフォーマンスと柔軟性が向上します。

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

pages/_app.js

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

詳細については、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',
})

上記の例では、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'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

単一のフォントファミリーに複数のファイルを使用する場合は、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またはローカルフォントの任意のフォントを使用できます）。variableオプションを使用してフォントをロードし、CSS変数名を定義してinterに割り当てます。次に、inter.variableを使用してCSS変数をHTMLドキュメントに追加します。

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

最後に、Tailwind CSS設定に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つの共有ファイルで呼び出します。
定数としてエクスポートします。
このフォントを使用する各ファイルで定数をインポートします。