--- title: "font-display: swapとは？Webフォント表示中の文字の出し方" description: "Webフォントの読み込み中に文字が見えない問題をどう扱うかを決めるのがfont-displayです。swapを指定するとまず代替フォントで表示し後から差し替える挙動になります。各値の違いと、CLSへの影響、実務での選び方を整理します。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/what-is-font-display-swap" markdown: "https://giga-site.com/articles/what-is-font-display-swap/index.md" category: "用語解説" publishedAt: "2026-06-24" updatedAt: "2026-06-25" readingMinutes: 5 --- # font-display: swapとは？Webフォント表示中の文字の出し方 Webフォントは読み込みに時間がかかると、その間文字が表示されず空白になることがあります。font-displayはこの待ち時間中に文字をどう見せるかを決めるCSSの指定で、swapは「まず代替フォントで表示し、後から差し替える」挙動を表します。 > Source HTML: https://giga-site.com/articles/what-is-font-display-swap > Article index: https://giga-site.com/articles/index.md ## font-displayが解決する問題 Webフォントはブラウザがファイルをダウンロードしてから文字を描画します。読み込みが遅いと、その間テキストが見えない空白状態になることがあります。これをFOIT（Flash of Invisible Text）と呼びます。 文章が読めない空白は、利用者にとって体感の遅さに直結します。font-displayは、この読み込み待ちの間に文字をどう扱うかをブラウザに指示するCSSの記述子で、@font-face内に書きます。 つまりfont-displayは、フォントの見た目そのものではなく、フォントが揃うまでの表示戦略を決めるための指定です。 ## swapの挙動 font-display: swapを指定すると、Webフォントの読み込みを待たずに、まず代替フォント（システムフォントなど）で文字を即座に表示します。そしてWebフォントの読み込みが完了した時点で、その書体に差し替えます。 この方式の利点は、利用者がほぼ待たずに文章を読み始められることです。空白で待たされるストレスがなくなり、体感速度が上がります。 一方で、代替フォントからWebフォントへ切り替わる瞬間に文字の見た目が変わる現象が起きます。これをFOUT（Flash of Unstyled Text）と呼びます。 ## 実務ではどこで関係する？ font-displayは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。 font-display: swapについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。 - 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する - 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける - 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない - 運用の話: 期限、差し替え、削除、共有メッセージまで決める ## swap以外の値 font-displayにはswap以外にも値があります。autoはブラウザ任せ、blockは短い待機の後にWebフォントを優先するため空白が出やすくなります。 fallbackは短時間だけ待ち、間に合わなければ代替フォントのまま据え置きます。optionalはさらに厳しく、すぐに使えない場合はWebフォントの適用を見送ることもあり、回線が遅い環境でのちらつきを避けたいときに向きます。 文章をとにかく早く読ませたいならswap、見た目の切り替えを極力避けたいならoptionalというように、目的で選び分けます。 ## swapを設定する手順 自前のWebフォントにfont-displayを設定する基本的な流れは次のとおりです。 設定自体はCSSへの1行追加で済みますが、代替フォントの選び方や確認まで含めて押さえておくと、切り替え時の違和感を抑えられます。 1. CSSの@font-faceブロックを用意する 2. src でフォントファイルを指定する 3. 同じブロック内に font-display: swap; を追記する 4. 代替フォントとして近い見た目のフォントをfont-familyのフォールバックに並べる 5. ブラウザで読み込み時の挙動と切り替わりのちらつきを確認する ## ちらつきを抑える工夫 swapはFOUTを許容する代わりに表示を速くする方法です。切り替わりの違和感を減らすには、代替フォントとWebフォントの見た目や文字幅をなるべく近づけることが有効です。 代替フォントの行間や字幅を調整し、差し替え時のレイアウトのずれを小さくする手法もあります。さらにフォントを軽量化したりプリロードして、そもそも読み込みを速くすることも切り替えのちらつき自体を減らします。 ## 実機での見え方を確認する font-displayの効果は回線速度やキャッシュの有無で見え方が変わるため、開発環境だけでなく実際の閲覧環境に近い状態で確認することが大切です。ブラウザの開発ツールで通信速度を絞ると、待ち時間中の挙動を再現できます。 フォントの見え方や切り替わりをチームに確認してもらいたいときは、HTMLとフォントファイルをまとめたZIPをそのまま共有できると話が早いです。ギガサイト便はCSS・JS・画像・フォントを含むZIPをドロップすると共有URLを発行でき、CDNのエッジ配信で表示も速いため、フォント込みの見た目チェックを関係者に依頼する用途に使えます。 ## よくある質問 ### font-display: swapを指定すると必ず速くなりますか？ 表示開始は速くなりますが、フォントファイル自体の読み込みが速くなるわけではありません。あくまで読み込み中も文字を見せる指定です。根本的な速度改善にはファイルの軽量化やプリロードなども併用します。 ### FOITとFOUTはどちらが良いのですか？ 目的によります。FOITは空白で待たせる代わりに見た目が一貫します。FOUTはすぐ読めますが書体が切り替わります。文章を早く読ませたい一般的なサイトではFOUTを許容するswapが選ばれることが多いです。 ### GoogleフォントなどCDN配信でも設定できますか？ Googleフォントの配信URLにはdisplayパラメータがあり、swapなどを指定できます。自前で@font-faceを書く場合は、そのブロック内にfont-displayを直接記述します。いずれの方法でも設定可能です。 ### 切り替わり時のレイアウトのずれを防ぐには？ 代替フォントとWebフォントの文字幅や行間が大きく違うとずれが目立ちます。見た目の近い代替フォントを選び、必要に応じて代替フォントのサイズ調整プロパティで字幅を合わせると、差し替え時のずれを抑えられます。 ### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？ 細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。 ## 関連記事 - [Webフォントとは？woff2と表示の仕組み](https://giga-site.com/articles/what-is-webfont/index.md) - [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md) - [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md) - [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md) - [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md) - [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "font-display: swapとは？Webフォント表示中の文字の出し方", "description": "Webフォントの読み込み中に文字が見えない問題をどう扱うかを決めるのがfont-displayです。swapを指定するとまず代替フォントで表示し後から差し替える挙動になります。各値の違いと、CLSへの影響、実務での選び方を整理します。", "datePublished": "2026-06-24", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/what-is-font-display-swap", "url": "https://giga-site.com/articles/what-is-font-display-swap", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "用語解説", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "font-display: swapを指定すると必ず速くなりますか？", "acceptedAnswer": { "@type": "Answer", "text": "表示開始は速くなりますが、フォントファイル自体の読み込みが速くなるわけではありません。あくまで読み込み中も文字を見せる指定です。根本的な速度改善にはファイルの軽量化やプリロードなども併用します。" } }, { "@type": "Question", "name": "FOITとFOUTはどちらが良いのですか？", "acceptedAnswer": { "@type": "Answer", "text": "目的によります。FOITは空白で待たせる代わりに見た目が一貫します。FOUTはすぐ読めますが書体が切り替わります。文章を早く読ませたい一般的なサイトではFOUTを許容するswapが選ばれることが多いです。" } }, { "@type": "Question", "name": "GoogleフォントなどCDN配信でも設定できますか？", "acceptedAnswer": { "@type": "Answer", "text": "Googleフォントの配信URLにはdisplayパラメータがあり、swapなどを指定できます。自前で@font-faceを書く場合は、そのブロック内にfont-displayを直接記述します。いずれの方法でも設定可能です。" } }, { "@type": "Question", "name": "切り替わり時のレイアウトのずれを防ぐには？", "acceptedAnswer": { "@type": "Answer", "text": "代替フォントとWebフォントの文字幅や行間が大きく違うとずれが目立ちます。見た目の近い代替フォントを選び、必要に応じて代替フォントのサイズ調整プロパティで字幅を合わせると、差し替え時のずれを抑えられます。" } }, { "@type": "Question", "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？", "acceptedAnswer": { "@type": "Answer", "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。" } } ] } ```