---
title: "font-displayとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "Webフォントの読み込み中の表示動作を制御するfont-displayの設定値と動作の違いを解説。AI生成HTMLを共有する際に発生する文字化けや文字の消失問題を事前に防ぎたい非エンジニア向けの記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-font-display-html-share"
markdown: "https://giga-site.com/articles/what-is-font-display-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# font-displayとは？HTML共有・AI生成サイトでの意味をやさしく解説
AIで作ったHTMLをURLで共有したとき「最初だけ文字が見えない」「フォントが急に変わった」という問題が起きることがあります。これはfont-displayの設定と深く関係しています。Webフォントの読み込み中にどう振る舞うかを制御するこの概念を理解すれば、共有先での文字表示トラブルをあらかじめ防げます。
> Source HTML: https://giga-site.com/articles/what-is-font-display-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
font-displayはCSSの`@font-face`内で使うプロパティで、Webフォントが読み込まれるまでの間をどう処理するかを指定します。主な値は`swap`（まず代替フォントで表示し、読み込み完了後に切り替える）・`block`（フォント読み込みまで文字を非表示にする）・`optional`（ネットワーク状況次第でフォントをスキップする）の3種類です。
AIが生成したCSSにfont-displayが書かれていないと、ブラウザの既定の挙動に委ねられます。GoogleフォントをCDN経由で読み込むHTMLでは`font-display: swap`がURLパラメータで自動適用されますが、ローカルのwoff2ファイルを参照する構成では手動で`@font-face`内に追記する必要があります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
プレゼン用のHTMLを会議の開始直前に共有URL経由で開くと、フォントが読み込まれる前の数秒間に文字が白紙に見える（FOIT：Flash of Invisible Text）ことがあります。CSSに`font-display: swap`を追加するだけでこの問題は解消し、読み込み中もシステムフォントで文字が表示されます。
モバイル回線が遅い環境でパスワード付きのURLを開く場合、`font-display: optional`が有効です。フォントが間に合わなければシステムフォントで表示を完結させるため、表示待ちが発生しません。ブランドフォントの再現よりも「内容が早く読める」ことを優先する資料共有に向いています。
## よくある誤解
「`font-display: block`を使えば見た目が崩れない」という誤解があります。blockはフォント読み込みが終わるまで文字を完全に隠すため、回線が遅いと数秒間コンテンツが何も見えません。SEO的にもClsのスコアに影響するため、最近のガイドラインではswapかoptionalが推奨されています。
「Googleフォントを使っていればfont-displayは自動設定される」は条件付きで正しいです。GoogleフォントのURL末尾に`&display=swap`が含まれている場合のみ有効で、古いURLや自前でホストしたフォントには適用されません。AIが生成したHTMLのフォントURLを確認し、パラメータが含まれているか確かめましょう。
## 安全に使うための注意点
font-displayに`swap`を設定すると、フォント切り替えのタイミングでレイアウトがずれるCLS（累積レイアウトシフト）が発生することがあります。見出しのフォントサイズが大きい場合は切り替え時に下のコンテンツが動くため、代替フォントとWebフォントで行の高さが近いものをペアにするか、`size-adjust`プロパティで調整することを検討してください。
共有するHTMLに複数のWebフォントが含まれる場合、それぞれの`@font-face`にfont-displayを設定する必要があります。ひとつだけ設定して他を忘れると、設定したフォントだけ表示が安定し、残りはブラウザ既定の挙動に戻ります。CSSをテキストエディタで検索して`@font-face`の件数と`font-display`の件数が一致しているか確認してください。
## よくある質問
### font-display: swapとoptionalはどちらを選ぶべきですか？
デザインの再現が重要で閲覧者が比較的安定した回線を使う場合はswap、モバイルや低速回線の相手に配布する速度優先の資料ならoptionalを選びます。どちらも非表示になる時間がないため、FOITは発生しません。
### AI生成のHTMLでCLSが高い原因がフォントだと疑っています。確認方法はありますか？
ChromeのDevToolsでPerformanceタブを記録し、「Layout Shift」マーカーを探します。フォントが切り替わる瞬間にシフトが発生しているならfont-displayの設定とフォントサイズの調整で改善できます。
### woff2ファイルをHTMLと同じフォルダに置いて共有する場合、font-displayの設定は必要ですか？
必要です。ローカルのwoff2でも読み込みに時間がかかる可能性があります。CSSの@font-face内に`font-display: swap`を記述することで、読み込み中も代替フォントでテキストが表示され、共有先での空白を防げます。
## 関連記事
- [Variable Fontとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-variable-font-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "font-displayとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "Webフォントの読み込み中の表示動作を制御するfont-displayの設定値と動作の違いを解説。AI生成HTMLを共有する際に発生する文字化けや文字の消失問題を事前に防ぎたい非エンジニア向けの記事です。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-font-display-html-share",
"url": "https://giga-site.com/articles/what-is-font-display-html-share",
"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とoptionalはどちらを選ぶべきですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "デザインの再現が重要で閲覧者が比較的安定した回線を使う場合はswap、モバイルや低速回線の相手に配布する速度優先の資料ならoptionalを選びます。どちらも非表示になる時間がないため、FOITは発生しません。"
}
},
{
"@type": "Question",
"name": "AI生成のHTMLでCLSが高い原因がフォントだと疑っています。確認方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ChromeのDevToolsでPerformanceタブを記録し、「Layout Shift」マーカーを探します。フォントが切り替わる瞬間にシフトが発生しているならfont-displayの設定とフォントサイズの調整で改善できます。"
}
},
{
"@type": "Question",
"name": "woff2ファイルをHTMLと同じフォルダに置いて共有する場合、font-displayの設定は必要ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "必要です。ローカルのwoff2でも読み込みに時間がかかる可能性があります。CSSの@font-face内に`font-display: swap`を記述することで、読み込み中も代替フォントでテキストが表示され、共有先での空白を防げます。"
}
}
]
}
```