--- title: "Edgeでフォントが変わるときに共有前に確認するチェックリスト" description: "EdgeでフォントがChromeと変わって見える問題を共有前に発見したいデザイナー・Web担当者向け。送信前に一人でできる確認手順をチェックリスト形式でまとめ、よくある見落としポイントを解説します。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/edge-font-different-checklist" markdown: "https://giga-site.com/articles/edge-font-different-checklist/index.md" category: "トラブルシュート" publishedAt: "2026-06-25" updatedAt: "2026-06-25" readingMinutes: 5 --- # Edgeでフォントが変わるときに共有前に確認するチェックリスト HTMLをEdgeで共有する前にフォント問題を見つけておくことで、受け取り相手から「文字が崩れています」と指摘されるリスクをゼロに近づけられます。このチェックリストは送信者がブラウザを開くだけで実行できる項目に絞りました。 > Source HTML: https://giga-site.com/articles/edge-font-different-checklist > Article index: https://giga-site.com/articles/index.md ## よくある原因共有前チェックで最も多く引っかかるのは、CSSのfont-familyにスペース入りフォント名をクォートなしで書いているケースです。`font-family: Noto Sans JP, sans-serif`はCSSの構文上エラーにならないブラウザもありますが、Edgeでは先頭の`Noto`だけをフォント名と解釈して失敗し、フォールバックに落ちることがあります。生成AIはこのミスを意外と頻繁に犯します。次点はフォント読み込みのlink要素を``に書いてしまうケースです。EdgeはChromiumベースとはいえ、ページのレンダリング開始タイミングでfontが読み込まれていないと、FOUTが発生し最終的に適用フォントが変わって見える場合があります。Google Fontsのlinkは必ず``内の早い位置、できれば``の直後に配置します。 - 相手がログインなしで開ける状態か確認する - PCとスマホで最低1回ずつ表示を確認する - 内部情報・個人情報・不要な外部送信が残っていないか見る - レビュー期限と修正時の差し替え方を決めておく ## 自分側で確認することチェック1：HTMLファイルをローカルのEdgeで直接開き、見出しと本文のフォントがデザイン意図と一致するかを目視確認します。Chromeで正常でもEdgeで崩れる場合はfont-familyの記述かCDN読み込み失敗が原因です。開発者ツールのElementsパネルでh1やpの`Rendered Fonts`を確認すると、実際に適用されたフォント名がわかります。チェック2：HTMLのhead内を検索し（Ctrl+F）、`fonts.googleapis.com`または`fonts.gstatic.com`へのリンクがあるか確認します。存在する場合は、そのURLをEdgeのアドレスバーに貼り付けてアクセスできるか試します。アクセス失敗ならフォントがオフライン環境や制限ネットワークで読み込めないため、woff2のインライン埋め込みへの切り替えを検討します。 - HTML内の外部script・form action・iframeを確認する - APIキーやトークンらしき文字列がないか検索する - 画像・CSS・JSのパスが公開後も解決できるか見る - noindexと認証を混同せず、必要なら両方設定する ## 相手側で確認すること相手にURLを共有する前に、別デバイスや別アカウントのEdgeで表示を試す「擬似的な相手環境テスト」を行います。自分のEdgeにログインしているとキャッシュや拡張機能の影響を受けるため、InPrivateウィンドウ（Ctrl+Shift+N）で開くと相手に近い状態を再現できます。フォントが変わる場合はここで検出できます。相手が社内PCを使っている可能性があるときは「フォントが変わって見えたらEdgeのバージョン（設定→Microsoft Edgeについて）を教えてください」と事前に依頼メッセージに添えておきます。旧EdgeHTMLエンジンではWebフォントの対応が限定的なため、確認後に対応方法を変える必要があります。 - HTML内の外部script・form action・iframeを確認する - APIキーやトークンらしき文字列がないか検索する - 画像・CSS・JSのパスが公開後も解決できるか見る - noindexと認証を混同せず、必要なら両方設定する ## 再発防止の運用このチェックリストをMarkdownファイルとして手元に保存し、HTMLをギガサイト便にアップロードする直前のステップとして組み込みます。具体的には「①Edgeローカル確認→②フォントソース確認→③InPrivate確認→④アップロード」の順序を固定化します。手順を省略しがちな締め切り前ほど、このフローが有効です。 AIでHTMLを生成するたびに同じチェックを繰り返すのが負担な場合は、生成プロンプトに「Edgeで表示するためにフォントはwoff2インライン埋め込みにすること」と指示すると、チェックの一部を自動化できます。生成物にwoff2のBase64データが含まれていればEdge固有のフォント問題はほぼ回避できます。 - HTML内の外部script・form action・iframeを確認する - APIキーやトークンらしき文字列がないか検索する - 画像・CSS・JSのパスが公開後も解決できるか見る - noindexと認証を混同せず、必要なら両方設定する ## よくある質問 ### InPrivateウィンドウで確認しても自分のEdgeと表示が同じなら問題ないですか？ InPrivateはキャッシュと拡張機能を除外しますが、Windowsのシステムフォントや企業ポリシーは共有されます。相手が全く別のOSやフォントセットを持つ場合には差が出ることがあるため、可能であれば別マシンでも確認することを推奨します。 ### チェックリストを毎回実行するのが面倒です。自動化できますか？ Playwright等のE2Eツールを使えばEdgeでのスクリーンショット取得を自動化できますが、導入コストが高いです。まずはギガサイト便にアップロード後、スマホのEdgeアプリで確認するだけでも異なる環境での検証になり、見落としを減らせます。 ### font-familyのフォールバックに何を指定すれば最低限Edgeで崩れませんか？ Windows環境のEdgeには`'Meiryo UI', 'MS PGothic', sans-serif`を、macOSを含む場合は`'Hiragino Kaku Gothic ProN', 'Meiryo UI', sans-serif`を追加しておくと、Webフォントが失敗してもシステムの日本語フォントが適用されてレイアウト崩れを最小化できます。 ## 関連記事 - [Edgeでフォントが変わるときの原因と直し方](https://giga-site.com/articles/edge-font-different-fix/index.md) - [Edgeでフォントが変わる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/edge-font-different-ai-prompt/index.md) - [Edgeでフォントが変わるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/edge-font-different-request-message/index.md) - [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md) - [ファビコンが更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/favicon-cache-checklist/index.md) - [QRコードで開くと404になるときに共有前に確認するチェックリスト](https://giga-site.com/articles/qr-404-checklist/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "Edgeでフォントが変わるときに共有前に確認するチェックリスト", "description": "EdgeでフォントがChromeと変わって見える問題を共有前に発見したいデザイナー・Web担当者向け。送信前に一人でできる確認手順をチェックリスト形式でまとめ、よくある見落としポイントを解説します。", "datePublished": "2026-06-25", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/edge-font-different-checklist", "url": "https://giga-site.com/articles/edge-font-different-checklist", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "トラブルシュート", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "InPrivateウィンドウで確認しても自分のEdgeと表示が同じなら問題ないですか？", "acceptedAnswer": { "@type": "Answer", "text": "InPrivateはキャッシュと拡張機能を除外しますが、Windowsのシステムフォントや企業ポリシーは共有されます。相手が全く別のOSやフォントセットを持つ場合には差が出ることがあるため、可能であれば別マシンでも確認することを推奨します。" } }, { "@type": "Question", "name": "チェックリストを毎回実行するのが面倒です。自動化できますか？", "acceptedAnswer": { "@type": "Answer", "text": "Playwright等のE2Eツールを使えばEdgeでのスクリーンショット取得を自動化できますが、導入コストが高いです。まずはギガサイト便にアップロード後、スマホのEdgeアプリで確認するだけでも異なる環境での検証になり、見落としを減らせます。" } }, { "@type": "Question", "name": "font-familyのフォールバックに何を指定すれば最低限Edgeで崩れませんか？", "acceptedAnswer": { "@type": "Answer", "text": "Windows環境のEdgeには`'Meiryo UI', 'MS PGothic', sans-serif`を、macOSを含む場合は`'Hiragino Kaku Gothic ProN', 'Meiryo UI', sans-serif`を追加しておくと、Webフォントが失敗してもシステムの日本語フォントが適用されてレイアウト崩れを最小化できます。" } } ] } ```