---
title: "Edgeでフォントが変わるときの原因と直し方"
description: "AIで生成したHTMLをEdgeで開いたときにフォントが変わってしまう問題に悩むWeb担当者向け。原因の特定から自分側・相手側の確認ポイント、再発を防ぐ運用まで具体的に解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/edge-font-different-fix"
markdown: "https://giga-site.com/articles/edge-font-different-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Edgeでフォントが変わるときの原因と直し方

Edgeでフォントが意図と違う表示になる原因は、ブラウザ固有のフォントフォールバック設定やCSSの書き方にあることがほとんどです。送った側では気づきにくいため、原因の切り分けと修正手順を把握しておくと、共有後のやり直しを大幅に減らせます。

> Source HTML: https://giga-site.com/articles/edge-font-different-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

Edgeはシステムフォントのフォールバック順序がChromeと異なる場合があります。CSSで`font-family: 'Noto Sans JP', sans-serif`と指定しても、Noto Sans JPがインストールされていない環境ではEdgeが独自の日本語フォントを選択するため、見た目が大きく変わります。Google Fontsなどの外部CDNを使っている場合、企業ネットワークでブロックされているとさらに別のフォントに切り替わります。

もう一つの原因はAI生成HTMLがフォント名をシングルクォートなしで記述するケースです。たとえば`font-family: Noto Sans JP, sans-serif`のようにスペースを含むフォント名をクォートで囲んでいないと、ブラウザによってはフォント名の解釈に失敗し、最初の`sans-serif`だけが適用されます。EdgeはChromiumベースであっても厳密度が異なるバージョンが企業に残っていることも多く、古いEdgeで再現するケースも見られます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

まずHTMLのhead内でフォントをどのように読み込んでいるか確認します。Google Fontsのlinkタグを使っている場合、`display=swap`パラメータを付けているか、かつフォールバックに日本語対応フォント（例：`'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif`）を並べているかをチェックします。フォールバックがないと、CDNが届かない環境でフォントが完全に化けます。

次にブラウザの開発者ツール（F12→Computed→Rendered Fonts）でEdgeが実際に何のフォントを使っているか確認します。意図したフォントが表示されていなければ、CSS側のfont-familyの記述ミスかCDN読み込み失敗が原因です。Edge以外のブラウザで正常ならEdge固有の問題と断定でき、CSSの修正対象を絞り込めます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手に確認を依頼するときは「EdgeのバージョンとOSを教えてください」と具体的に聞きます。Edge 18以前（EdgeHTMLエンジン）とEdge 79以降（Chromiumエンジン）ではフォント処理が根本的に異なるため、バージョンが特定できると修正の優先度が変わります。Windowsの設定→アプリ→Microsoft Edgeのバージョン確認手順をスクリーンショット付きで伝えると回答が得やすいです。

また相手が社内プロキシや企業ポリシーでGoogle Fontsをブロックしている可能性があります。その場合は「fonts.googleapis.comへのアクセスが制限されているか社内IT部門に確認してください」と伝え、確認できたらフォントをHTMLにインライン埋め込みするか、woff2ファイルをHTML内にBase64でバンドルする方法に切り替えます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

AIでHTMLを生成する際のプロンプトに「フォントはローカルフォールバックを必ず含めること、スペースを含むフォント名はシングルクォートで囲むこと」を明記するだけで、生成物の品質が安定します。また生成直後にEdgeとChromeの両方でローカルプレビューし、差がないか目視確認することをチェックリストに組み込むと効果的です。

共有サービスとしてギガサイト便を使う場合、公開URLを発行したあと自分のEdgeで一度アクセスし、フォントが崩れていないかを確認してから相手にURLを送る手順を標準化します。修正が必要な場合はHTMLを修正してギガサイト便に再アップロードするだけでURLは変わらないため、相手への再送不要で差し替えが完結します。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### EdgeでだけフォントがMeiryoに変わってしまうのはなぜですか？

Google Fontsが読み込めない環境でフォールバックが`sans-serif`のみだと、Edgeは日本語文字に対してMeiryoを選びます。フォールバックに`'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif`と明示するか、フォントをwoff2でインライン埋め込みすれば回避できます。

### フォントをBase64でHTMLに埋め込むと容量が大きくなりすぎませんか？

日本語フォント全体をBase64化すると数MB超えになる場合がありますが、使用する文字セットをサブセット化することで100〜200KB程度に抑えられます。ギガサイト便は最大50MBのファイルに対応しているため、サブセット済みフォントなら問題なくアップロードできます。

### CSSのfont-familyを修正したのにEdgeで変化がありません。どう対処しますか？

EdgeにはCSSキャッシュが残ることがあります。Ctrl+Shift+DeleteでEdgeのキャッシュをクリアしてからリロードしてください。それでも変わらない場合は開発者ツールのNetworkタブでCSSファイルが304ではなく200で取得されているか確認します。

## 関連記事

- [Edgeでフォントが変わるときに共有前に確認するチェックリスト](https://giga-site.com/articles/edge-font-different-checklist/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-fix/index.md)
- [ファビコンが更新されないときの原因と直し方](https://giga-site.com/articles/favicon-cache-fix/index.md)
- [QRコードで開くと404になるときの原因と直し方](https://giga-site.com/articles/qr-404-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Edgeでフォントが変わるときの原因と直し方",
  "description": "AIで生成したHTMLをEdgeで開いたときにフォントが変わってしまう問題に悩むWeb担当者向け。原因の特定から自分側・相手側の確認ポイント、再発を防ぐ運用まで具体的に解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/edge-font-different-fix",
  "url": "https://giga-site.com/articles/edge-font-different-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "EdgeでだけフォントがMeiryoに変わってしまうのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Google Fontsが読み込めない環境でフォールバックが`sans-serif`のみだと、Edgeは日本語文字に対してMeiryoを選びます。フォールバックに`'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif`と明示するか、フォントをwoff2でインライン埋め込みすれば回避できます。"
      }
    },
    {
      "@type": "Question",
      "name": "フォントをBase64でHTMLに埋め込むと容量が大きくなりすぎませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "日本語フォント全体をBase64化すると数MB超えになる場合がありますが、使用する文字セットをサブセット化することで100〜200KB程度に抑えられます。ギガサイト便は最大50MBのファイルに対応しているため、サブセット済みフォントなら問題なくアップロードできます。"
      }
    },
    {
      "@type": "Question",
      "name": "CSSのfont-familyを修正したのにEdgeで変化がありません。どう対処しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "EdgeにはCSSキャッシュが残ることがあります。Ctrl+Shift+DeleteでEdgeのキャッシュをクリアしてからリロードしてください。それでも変わらない場合は開発者ツールのNetworkタブでCSSファイルが304ではなく200で取得されているか確認します。"
      }
    }
  ]
}
```