トラブルシューティングガイド:web サイトへのフォントの追加

最終更新日 : 2025年1月10日

問題の内容

メモ

Adobe Fonts は、XP、Windows 7、Windows Vista、および Mac OSX と互換性がありません。

フォントがどのブラウザーでも機能しない

問題

解決策

埋め込みコードがサイトから欠落しています。

埋め込みコードを独自のサーバー上のファイルに縮小化しました。

縮小化は利用条件で許可されておらず、フォントが正しく読み込まれません。

CSS および JavaScript ファイルコンプレッサーから埋め込みコードを除外し、以下の埋め込みコードを使用するように web サイトをアップデートします。

正しいフォントファミリー名が CSS に追加されていません。

入力されたフォントファミリー名をご使用の CSS に追加します。 使用している Web フォントのフォントファミリー名を見つける方法については、CSS セレクターのヘルプページを参照してください。

ブラウザー拡張機能が Web フォントファイルをブロックしています。

ブラウザー拡張機能を無効にするか、アドビの web フォント(旧称 Typekit)を許可するように設定を変更します。

フォントがモバイルブラウザーで機能しない

問題

解決策

このブラウザーはサポートされていません。

スタイルの正しいフォントの太さが CSS で指定されていません。

Web プロジェクトに線幅またはスタイルを追加し、CSS で正しく指定されていることを確認します。

他のブラウザーで表示されるフォントが Firefox で表示されない

問題

解決策

非表示の設定でダウンロード可能なフォントがオフになっています。

別の非表示の設定が、ダウンロード可能なフォントを無効にしています。

  1. 新しいブラウザータブを開き、アドレスバーに about:config と入力します。
  2. 検索フィールドに gfx.downloadable_fonts.enabled と入力します。
  3. 値を true に設定します。 これを変更するには、環境設定行をダブルクリックします。

ユーザーフォントをオーバーライドするブラウザー設定がオフになっています。

環境設定で、カスタムフォントがユーザーのブラウザー設定をオーバーライドできるかどうかを指定できます。 言語と外観/フォント & カラー/詳細と移動して、「ページ独自のフォントを選択可能にする」オプションを選択します。

他のブラウザーで表示されるフォントが Internet Explorer で表示されない

問題

解決策

ドキュメントモードがブラウザーの古いバージョン [IE9以上] に設定されています。

異なるドキュメントモードを使用すると、ブラウザーに間違ったフォントファイル形式が提供されます。

以下のような、別のドキュメントモードを使用するよう Internet Explorer に指示するメタタグを削除します

<meta http-equiv="X-UA-Compatible" content="IE=8">

 

ダウンロードしたフォントを無効にするブラウザー設定がオンになっています [IE 8]。

セキュリティ設定で、すべてのダウンロード可能なフォントを無効にできます。 「ツール/インターネットオプション/セキュリティ/カスタムレベル/ダウンロード」で「フォントのダウンロード」を探します。 デフォルトのセキュリティレベルでフォントのダウンロードを有効にします。 セキュリティが「高」に設定されている場合は、フォントが読み込まれない可能性があります。

Internet Explorer ですべてのテキストが斜体になる

問題

解決策

ドキュメントモードがブラウザーの古いバージョンに設定されています。

異なるドキュメントモードを使用すると、ブラウザーに間違ったファイル形式が提供され、すべてのテキストが斜体で設定される場合があります。

以下のような、別のドキュメントモードを使用するよう Internet Explorer に指示するメタタグを削除します

<meta http-equiv="X-UA-Compatible" content="IE=8">


 

Safari および Mobile Safari でフォントが表示されない、または二重に表示される

問題

解決策

CSS で使用されるフォントの線幅またはスタイルは Web プロジェクトに組み込まれていません。

プロジェクトに線幅またはスタイルを追加し、CSS で正しく指定されていることを確認します。