フォント

印象的な書体は、サイトを際立たせる素晴らしい方法になります。ただし、カスタムフォントを使用することによるパフォーマンスへの影響に注意することが重要です。

ユーザーのマシンにプリインストールされているシステムフォントとは異なり、カスタムフォントはダウンロードする必要があります。

FOIT vs. FOUT

ユーザーがWebサイトにアクセスすると、ブラウザはサーバーからフォントファイルを要求します。次に、ブラウザはフォントファイルを使用して、ページ上のテキストをレンダリングします。

主な戦略は2つあります

• Webフォントがダウンロードされるまでテキストの表示を遅らせる（FOIT - Flash Of Invisible Text）。
• Webフォントの準備が整うまで、ローカルにインストールされた「フォールバック」フォントを使用する（FOUT - Flash Of Unstyled Text）。

どちらの方法にも欠点があります。FOITはユーザーからテキストを隠し、FOUTは視覚的な中断を引き起こす可能性があります。どちらもCLSの問題を引き起こします。Webフォントをダウンロードする必要がある限り、これらの問題は続きます。

font-display

幸いなことに、font-displayプロパティを使用して、ブラウザがフォントの読み込みを処理する方法を制御できます。これにより、2つの戦略のバランスを取ることができます。

フォント表示タイムラインがどのように機能するかだけでなく、さまざまな読み込み戦略を試してみることをお勧めします。

font-displayプロパティの2つの最も一般的な値は、swapとfallbackです。

Google Fonts

Google Fontsは、1500以上のフォントファミリーを提供する人気のオープンソースライブラリです。

使いやすいですが、異なるドメインからCSSファイルとフォントをダウンロードする必要があり、swapを使用しているにもかかわらず、フォントの読み込みに目立った遅延と切り替えが発生します。

ここで起こることは次のとおりです

1. ブラウザは<link href="https://fonts.googleapis.com/css2">タグを検出し、CSSファイルを要求するように指示します。
2. ファイルを分析した後、https://fonts.gstatic.comのWebフォントが必要であることがわかり、別のリクエストにつながります。

これを軽減するために、フォントを自己ホストできます。

自己ホスト

Google Fontsのようなサードパーティプロバイダーを使用するのではなく、フォントを自己ホストできます。これは、フォントファイルをダウンロードし、自分のドメインから提供することを意味します。

いくつかの利点には、次のものがあります。

• パフォーマンスの向上
• Googleがフォントの使用状況を追跡するため、プライバシーが向上します。
• 自己ホストフォントはオフラインでロードされるため、PWAや接続性の低い状況に役立ちます。

Fontsource

fontsourceでの自己ホストは、npmインストールと同じくらい簡単です。フォントファイルを自分で管理する手間をかけずに、すべてのGoogleフォントと他のオープンソースフォントが含まれています。

また、fontsourceをプロジェクトに追加する方法に関するQwik Cityガイドもあります。

手動

Googleフォントまたはfontsourceに含まれていないフォントを自己ホストしたい場合があります。

ttfまたはotfファイルがある場合は、woffまたはwoff2ファイルに変換する必要があります。これを行うには、FontsquirrelのWebfont Generator Toolを使用できます。

次に、CSSで@font-faceルールを作成する必要があります。使用するフォントの太さとスタイルごとに新しいルールを作成します。

@font-face {
  font-display: swap;
  font-family: "Peace Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/peace-sans.woff2") format("woff2");
}

上記は、フォントファイルの相対URLを使用して、フォントウェイトが400のフォント「Peace Sans」の@font-faceルールの例です。次に、CSSで次のようにフォントを使用できます

body {
  font-family: 'Peace Sans', sans-serif;
}

Google Fontsの手動自己ホスト

Google Webfonts Helperは、最適化されたGoogleフォントをダウンロードできるツールです。

残念ながら、これには可変フォントは含まれていません。これを回避するには、Google Fonts APIを使用し、Chromeのnetworkタブで最適化された可変フォントファイルをダウンロードします。

フォントサイズの削減

特定のグリフを使用していない場合は、unicode-rangeプロパティを使用してフォントサイズを縮小できます。Glyphhangerは、フォントの特定のサブセットを取得できるツールです。

一般的なシナリオは、フォントのラテンサブセットのみを使用することです。これにより、フォントファイルサイズを削減できます。

フォールバックフォント

前のセクションで、カスタムフォントの読み込み時に CLS の問題が発生する可能性があると述べたことを思い出してください。

最近、「フォントマッチング」や、カスタムフォントの CLS の影響を減らすためにタイポグラフィのプロパティを調整する取り組みが行われています。どのように行うか見ていきましょう。

フォールバックフォントジェネレーター

このツールは、特別なプロパティを持つシステムフォールバックを生成します。これがどのように機能するかの誇張されたデモです。

size-adjust、ascent-override、descent-overrideプロパティを使用して、カスタムフォントに合わせてシステムフォールバックフォントを調整できます。

Fontaine

Fontaineは、CLS の問題を回避するために上記のプロパティを自動的に調整します。vite設定に追加できる vite プラグインを提供しています。

システムフォント

最もパフォーマンスの高いオプションは、システムフォントです。これは、ユーザーがすでにマシンにフォントをインストールしており、ブラウザがテキストをすぐにレンダリングできるためです。

システムフォントは、互いに十分に類似したシステムフォントのコレクションである「フォントスタック」と呼ばれることがよくあります。最初のフォントが利用できない場合、ブラウザはスタック内の次のフォントを使用できます。

Tailwind CSS は、一般的なシステムフォント用のユーティリティクラスも提供しています。Modern Font Stacks は、コミュニティメンバーによるTailwind CSS プラグインを含め、さまざまなフォントスタックをテストするために使用できるツールの例です。

フォントUX

本文の最大幅にch単位を使用しない

テキストを読むためにユーザーが頭を動かす必要がないように、また、追跡しやすくするために、最大幅を 75ch または75文字にすることをお勧めします。

ただし、カスタムフォントを使用している場合は、ch単位に注意する必要があります。これは、ch単位が 0 文字の幅に基づいており、フォントによって異なる可能性があるためです。

これにより、非常に独特なレイアウトシフトが発生する可能性があります。pxまたは rem を使用して最大幅を設定する必要があります。

font-sizeプロパティでremを使用する。

さまざまな単位には、それぞれ独自のアクセシビリティに関する懸念があります。ルートのフォントサイズに基づいているため、font-sizeプロパティでremを使用する必要があります。そうしないと、ユーザーが選択したフォントサイズが尊重されません。

行の高さの推奨事項

ブラウザのデフォルトの行の高さは、読書には適していません。本文フォントでは、1.5 前後の行の高さが必要です。見出しでは、1.2 前後の行の高さが必要です。