---
title: "Edgeでフォントが変わる問題をAI生成HTMLで防ぐプロンプト"
description: "AIが生成したHTMLをEdgeで開いたときにフォントが変わる問題を、プロンプトの書き方で未然に防ぎたいエンジニア・デザイナー向け。有効なプロンプトパターンと生成後の確認ポイントを具体的に紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/edge-font-different-ai-prompt"
markdown: "https://giga-site.com/articles/edge-font-different-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Edgeでフォントが変わる問題をAI生成HTMLで防ぐプロンプト
AIにHTMLを生成させるとき、フォント指定を曖昧にしたままにするとEdgeで崩れて見えるコードが出てきます。プロンプトに具体的な制約を加えるだけで生成物の品質が上がり、共有後のフォントトラブルをほぼゼロにできます。
> Source HTML: https://giga-site.com/articles/edge-font-different-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AIがHTML生成時にフォント指定を省略したり、`font-family: sans-serif`だけを書くケースが多いです。「日本語対応でおしゃれにして」などの曖昧な指示ではAIはフォント読み込み処理を省略しがちで、結果的にEdgeのシステムデフォルトフォント（多くの場合Meiryo）が使われます。これはEdge固有というよりプロンプトの精度問題です。
また、AIが`@import url('https://fonts.googleapis.com/...')`をCSSに書く場合、CSS内のimportはHTMLのlinkタグより読み込みが遅く、Edgeでレンダリングブロックが起きやすいです。Edge上でページを開くと一瞬フォールバックフォントが見えてからWebフォントに切り替わるFOUTが顕著になり、「フォントが変わった」と誤認されることもあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
生成されたHTMLの``内にフォント関連の記述があるか最初に確認します。存在しない場合はプロンプトが不十分です。存在する場合でも`font-family`の値にシングルクォートがあるか、フォールバックに複数フォントが並んでいるかをチェックします。どちらも問題なければ、次はフォントソースURL（fonts.googleapis.comなど）がEdgeから実際にアクセスできるか確認します。
EdgesのF12→Networkタブを開いた状態でHTMLを再読み込みし、フォントファイル（.woff2）が200 OKで取得されているかフィルターで確認します。304（キャッシュ）でも問題ありませんが、ERRORやブロックになっている場合はCDNが使えない環境です。その場合はAIへの次のプロンプトで「フォントは外部CDNを使わずBase64でインライン埋め込みすること」と明示します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
共有先の相手がEdge旧版（EdgeHTML系）を使っている場合、`@font-face`のwoff2形式すら部分的にしかサポートしない版があります。相手のEdgeバージョンが100未満の場合は、フォントを`font-family: 'Meiryo', 'MS PGothic', sans-serif`のようにシステムフォントのみで構成したシンプルなバージョンのHTMLを別途用意するのが現実的です。
相手が「自分の画面では問題ない」と言っている場合でも、端末のDPIやOSのフォントレンダリング設定によって見え方が異なることを説明します。特に`font-weight: 300`のような細い文字は、WindowsのClearTypeが無効の環境で読みにくくなるため、font-weightを400以上にするようAIへの再プロンプトを検討します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
AIへのプロンプトに以下の文言を定型句として追加することで、Edge互換フォント設定を持つHTMLが生成されやすくなります：「フォントはGoogle Fonts CDNを使わず、woff2ファイルをBase64エンコードしてHTMLにインライン埋め込みすること。font-familyには必ず日本語対応のシステムフォントフォールバックを含めること。スペースを含むフォント名はシングルクォートで囲むこと。」
この定型句を生成AIのシステムプロンプト（ChatGPTの場合はカスタム指示、Claudeの場合はProject内の指示）に設定しておけば、毎回入力する必要がなくなります。チームで使う場合はNotion等に「HTML生成用プロンプトテンプレート」として保存・共有しておくと、担当者が変わっても同じ品質を維持できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### AIに「Edge対応のフォントにして」と指示するだけでは不十分ですか？
「Edge対応」という指示はAIにとって曖昧で、CDN読み込みのままにするケースが多いです。「woff2をBase64でインライン埋め込み」「フォールバックにMeiryo UIを含める」のように技術的に具体的な制約を書くと生成精度が上がります。
### Base64インライン埋め込みのデメリットはありますか？
HTMLファイルサイズが増加します。日本語フォントをサブセット化せず丸ごと埋め込むと5MB超になることもあります。使用文字だけを抽出したサブセットフォント（glyphhanger等で生成）を使えば200KB以下に収められます。
### 生成されたHTMLのfont-familyをChromeで確認済みならEdgeも大丈夫ですか？
ChromeとEdgeは同じChromiumエンジンでも、Edgeには独自のフォントキャッシュ管理と企業ポリシー適用があります。特に社内配布端末では差が出ることがあるため、Edge固有のフォントアクセス制限を考慮した確認が必要です。
## 関連記事
- [Edgeでフォントが変わるときの原因と直し方](https://giga-site.com/articles/edge-font-different-fix/index.md)
- [Edgeでフォントが変わるときに共有前に確認するチェックリスト](https://giga-site.com/articles/edge-font-different-checklist/index.md)
- [Edgeでフォントが変わるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/edge-font-different-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [ファビコンが更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/favicon-cache-ai-prompt/index.md)
- [QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/qr-404-ai-prompt/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Edgeでフォントが変わる問題をAI生成HTMLで防ぐプロンプト",
"description": "AIが生成したHTMLをEdgeで開いたときにフォントが変わる問題を、プロンプトの書き方で未然に防ぎたいエンジニア・デザイナー向け。有効なプロンプトパターンと生成後の確認ポイントを具体的に紹介します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/edge-font-different-ai-prompt",
"url": "https://giga-site.com/articles/edge-font-different-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIに「Edge対応のフォントにして」と指示するだけでは不十分ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「Edge対応」という指示はAIにとって曖昧で、CDN読み込みのままにするケースが多いです。「woff2をBase64でインライン埋め込み」「フォールバックにMeiryo UIを含める」のように技術的に具体的な制約を書くと生成精度が上がります。"
}
},
{
"@type": "Question",
"name": "Base64インライン埋め込みのデメリットはありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTMLファイルサイズが増加します。日本語フォントをサブセット化せず丸ごと埋め込むと5MB超になることもあります。使用文字だけを抽出したサブセットフォント（glyphhanger等で生成）を使えば200KB以下に収められます。"
}
},
{
"@type": "Question",
"name": "生成されたHTMLのfont-familyをChromeで確認済みならEdgeも大丈夫ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ChromeとEdgeは同じChromiumエンジンでも、Edgeには独自のフォントキャッシュ管理と企業ポリシー適用があります。特に社内配布端末では差が出ることがあるため、Edge固有のフォントアクセス制限を考慮した確認が必要です。"
}
}
]
}
```