このページは Cloud Translation API によって翻訳されました。

フォントフォールバックのフレームワークツール

Janicklas Ralph James

font-display: swap を使用してフォントを読み込むサイトでは、ウェブフォントが読み込まれて代替フォントでスワップされたときにレイアウトシフト（CLS）が発生することがよくあります。

CLS を防ぐには、代替フォントの大きさをメインフォントの大きさに合わせて調整します。@font-face ルールの size-adjust、ascent-override、descent-override、line-gap-override などのプロパティを使用すると、フォールバックフォントの指標をオーバーライドして、フォントの表示方法をより細かく制御できます。font-fallback とオーバーライドプロパティの詳細については、こちらの投稿をご覧ください。この手法の実装例については、こちらのデモをご覧ください。

この記事では、Next.js フレームワークと Nuxt.js フレームワークでフォントサイズの調整を実装して、代替フォント CSS を生成し、CLS を削減する方法について説明します。また、Fontaine や Capsize などのクロスカットツールを使用して代替フォントを生成する方法についても説明します。

背景

font-display: swap は通常、FOIT（非表示テキストのフラッシュ）を防ぎ、コンテンツを画面にすばやく表示するために使用されます。swap の値は、そのフォントを使用したテキストをシステムフォントを使用してすぐに表示し、カスタムフォントが準備できた場合にのみシステムフォントを置き換えるようにブラウザに指示します。

swap の最大の問題は、2 つのフォントの文字サイズの違いによって画面のコンテンツがずれるという、耳障りな効果です。これにより、特にテキストが多いウェブサイトでは CLS スコアが低下します。

次の画像は、問題の例を示しています。最初の画像は font-display: swap を使用しており、フォールバックフォントのサイズを調整していません。2 つ目は、CSS の @font-face ルールを使用してサイズを調整すると、読み込みエクスペリエンスがどのように改善されるかを示しています。

フォントサイズを調整しない

body {
  font-family: Inter, serif;
}

フォントサイズを調整した後

body {
  font-family: Inter, fallback-inter, serif;
  }

@font-face {
  font-family: "fallback-inter";
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
  src: local("Arial");
}

代替フォントサイズを調整することは、フォント読み込み時のレイアウトシフトを防ぐ効果的な方法ですが、フォントフォールバックに関するこちらの投稿で説明されているように、ロジックをゼロから実装するのは難しい場合があります。幸いなことに、アプリの開発中にこの作業を容易にする複数のツールオプションがすでに用意されています。

Next.js を使用してフォントのフォールバックを最適化する方法

Next.js には、フォールバックフォントの最適化を有効にする組み込みの方法が用意されています。この機能は、@next/font コンポーネントを使用してフォントを読み込むと、デフォルトで有効になります。

@next/font コンポーネントは、Next.js バージョン 13 で導入されました。このコンポーネントには、Google フォントまたはカスタムフォントをページにインポートするための API が用意されており、フォントファイルの自動セルフホスティングが組み込まれています。

使用すると、代替フォントメトリックが自動的に計算され、CSS ファイルに挿入されます。

たとえば、Roboto フォントを使用している場合は、通常、次のように CSS で定義します。

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}

body {
  font-family: Roboto;
}

next/font に移行するには:

「next/font」から「Roboto」関数をインポートして、Roboto フォント宣言を JavaScript に移動します。関数の戻り値は、コンポーネントテンプレートで利用できるクラス名になります。この機能を有効にするには、構成オブジェクトに display: swap を追加してください。
```
 import { Roboto } from '@next/font/google';

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap' // Using display swap automatically enables the feature
})
```
コンポーネントで、生成されたクラス名 javascript export default function RootLayout({ children }: { children: React.ReactNode; }) { return ( <html lang="en" className={roboto.className}> <body>{children}</body> </html> ); } を使用します。

注: next/font コンポーネントは、フォールバックフォントとして「Arial」と「Times New Roman」のみをサポートするように設計されています。この選択は、主に Arial フォントと Times New Roman フォントがすべてのプラットフォームでサポートされているためです。

adjustFontFallback 構成オプション:

@next/font/google の場合: Cumulative Layout Shift を削減するために自動代替フォントを使用するかどうかを設定するブール値。デフォルトは true です。Next.js は、フォントタイプ（それぞれセリフとサンセリフ）に応じて、代替フォントを Arial または Times New Roman に自動的に設定します。

@next/font/local の場合: 自動フォールバックフォントを使用して累積レイアウトシフトを低減するかどうかを設定する文字列またはブール値 false。指定可能な値は Arial、Times New Roman、false です。デフォルトは Arial です。セリフフォントを使用する場合は、この値を Times New Roman に設定することを検討してください。

Google Fonts の別のオプション

next/font コンポーネントを使用できない場合は、optimizeFonts フラグを使用して Google Fonts でこの機能を使用することもできます。Next.js では、optimizeFonts 機能がデフォルトで有効になっています。この機能は、HTML レスポンスに Google Font CSS をインライン化します。さらに、次のスニペットに示すように、next.config.js で experimental.adjustFontFallbacksWithSizeAdjust フラグを設定することで、フォントフォールバック調整機能を有効にできます。

// In next.config.js
module.exports = {
 experimental: {
   adjustFontFallbacksWithSizeAdjust: true,
 },
}

注: 新たに導入された app ディレクトリでこの機能をサポートする予定はありません。長期的には next/font を使用することをおすすめします。

Nuxt でフォントフォールバックを設定する方法

@nuxtjs/fontaine は、フォールバックフォント指標値を自動的に計算し、フォールバック @font-face CSS を生成する Nuxt.js フレームワークのモジュールです。

モジュール構成に @nuxtjs/fontaine を追加して、モジュールを有効にします。

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
})

Google Fonts を使用している場合や、フォントに対する @font-face 宣言がない場合は、追加オプションとして宣言できます。

ほとんどの場合、このモジュールは CSS から @font-face ルールを読み取り、font-family、代替フォントファミリー、表示タイプなどの詳細を自動的に推測できます。

モジュールで検出できない場所でフォントが定義されている場合は、次のコードスニペットに示すように、指標情報を渡すことができます。

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  fontMetrics: {
  fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }],
},
})

このモジュールは CSS を自動的にスキャンして @font-face 宣言を読み取り、フォールバック @font-face ルールを生成します。

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}
/* This will be generated. */
@font-face {
  font-family: 'Roboto override';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
    local('Arial'), local('Noto Sans');
  ascent-override: 92.7734375%;
  descent-override: 24.4140625%;
  line-gap-override: 0%;
}

これで、次の例に示すように、CSS で代替フォントとして Roboto override を使用できるようになりました。

:root {
  font-family: 'Roboto';
  /* This becomes */
  font-family: 'Roboto', 'Roboto override';
}

CSS を自分で生成する

スタンドアロンライブラリを使用すると、フォールバックフォントサイズ調整用の CSS を生成することもできます。

Fontaine ライブラリの使用

Nuxt または Next.js を使用していない場合は、Fontaine を使用できます。Fontaine は、@nuxtjs/fontaine を支える基盤となるライブラリです。プロジェクトでこのライブラリを使用すると、Vite または Webpack プラグインで代替フォントの CSS を自動的に挿入できます。

CSS ファイルで Roboto フォントが定義されているとします。

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}

Fontaine には、Vite と Webpack トランスフォーマーが用意されており、ビルドチェーンに簡単にプラグインできます。次の JavaScript に示すように、プラグインを有効にします。

import { FontaineTransform } from 'fontaine'

const options = {
  fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
  // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
  resolvePath: (id) => 'file:///path/to/public/dir' + id,
  // overrideName: (originalName) => `${name} override`
  // sourcemap: false
}

Vite を使用している場合は、次のようにプラグインを追加します。 javascript // Vite export default { plugins: [FontaineTransform.vite(options)] }

Webpack を使用する場合は、次のように有効にします。

// Webpack
export default {
  plugins: [FontaineTransform.webpack(options)]
}

このモジュールは、ファイルを自動的にスキャンして @font-face ルールを変更します。 css @font-face { font-family: 'Roboto'; font-display: swap; src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff'); font-weight: 700; } /* This will be generated. */ @font-face { font-family: 'Roboto override'; src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'), local('Noto Sans'); ascent-override: 92.7734375%; descent-override: 24.4140625%; line-gap-override: 0%; }

CSS で代替フォントとして Roboto override を使用できるようになりました。 css :root { font-family: 'Roboto'; /* This becomes */ font-family: 'Roboto', 'Roboto override'; }

Capsize ライブラリの使用

Next.js、Nuxt、Webpack、Vite を使用していない場合は、Capsize ライブラリを使用して代替 CSS を生成することもできます。

新しい createFontStack API

この API は、createFontStack という @capsize/core パッケージの一部であり、フォントスタック（font-family プロパティ）を指定するときと同じ順序でフォントメトリックの配列を受け入れます。

Capsize の使用方法については、こちらのドキュメントをご覧ください。

例

次の例について考えてみましょう。目的のウェブフォントは Lobster で、Helvetica Neue にフォールバックし、次に Arial にフォールバックします。CSS では font-family: Lobster, 'Helvetica Neue', Arial です。

コアパッケージから createFontStack をインポートします。
```
import { createFontStack } from '@capsizecss/core';
```
必要なフォントのフォントメトリックをインポートします（上記のフォントメトリックをご覧ください）。 javascript import lobster from '@capsizecss/metrics/lobster'; import helveticaNeue from '@capsizecss/metrics/helveticaNeue'; import arial from '@capsizecss/metrics/arial';`
フォントスタックを作成し、CSS の font-family プロパティで指定する場合と同じ順序で指標を配列として渡します。 javascript const { fontFamily, fontFaces } = createFontStack([ lobster, helveticaNeue, arial, ]);

これにより、次の結果が返されます。

{
  fontFamily: Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial',
  fontFaces: [
    {
      '@font-face' {
      'font-family': '"Lobster Fallback: Helvetica Neue"';
      src: local('Helvetica Neue');
      'ascent-override': '115.1741%';
      'descent-override': '28.7935%';
      'size-adjust': '86.8251%';
      }
     '@font-face' {
       'font-family': '"Lobster Fallback: Arial"';
       src: local('Arial');
       'ascent-override': 113.5679%;
       'descent-override': 28.392%;
       'size-adjust': 88.053%;
     }
   }
 ]
}

fontFamily コードと fontFaces コードを CSS に追加する必要があります。次のコードは、CSS スタイルシートまたは <style> ブロック内で実装する方法を示しています。

<style type="text/css">
  .heading {
    font-family: 
  }

  
</style>

生成される CSS は次のようになります。

.heading {
  font-family: Lobster, 'Lobster Fallback: Helvetica Neue',
    'Lobster Fallback: Arial';
}

@font-face {
  font-family: 'Lobster Fallback: Helvetica Neue';
  src: local('Helvetica Neue');
  ascent-override: 115.1741%;
  descent-override: 28.7935%;
  size-adjust: 86.8251%;
}
@font-face {
  font-family: 'Lobster Fallback: Arial';
  src: local('Arial');
  ascent-override: 113.5679%;
  descent-override: 28.392%;
  size-adjust: 88.053%;
}

また、@capsize/metrics パッケージを使用してオーバーライド値を計算し、手動で CSS に適用することもできます。

const fontMetrics = require(`@capsizecss/metrics/inter`);
const fallbackFontMetrics = require(`@capsizecss/metrics/arial`);
const mainFontAvgWidth = fontMetrics.xAvgWidth / fontMetrics.unitsPerEm;
const fallbackFontAvgWidth = fallbackFontMetrics.xAvgWidth / fallbackFontMetrics.unitsPerEm;
let sizeAdjust = mainFontAvgWidth / fallbackFontAvgWidth;
let ascent = fontMetrics.ascent / (unitsPerEm * fontMetrics.sizeAdjust));
let descent = fontMetrics.descent / (unitsPerEm * fontMetrics.sizeAdjust));
let lineGap = fontMetrics.lineGap / (unitsPerEm * fontMetrics.sizeAdjust));

フォント フォールバックのフレームワーク ツール

背景

フォントサイズを調整しない

フォントサイズを調整した後

Next.js を使用してフォントのフォールバックを最適化する方法

Google Fonts の別のオプション

Nuxt でフォント フォールバックを設定する方法

CSS を自分で生成する

Fontaine ライブラリの使用

Capsize ライブラリの使用

新しい createFontStack API

例

フォントフォールバックのフレームワークツール

Nuxt でフォントフォールバックを設定する方法