クロスオリジン リソース シェアリング(CORS)レスポンス ヘッダーがない
ブラウザ:
- Firefox(3.5 以降)
- Internet Explorer(9 以降)
- Chrome(37 以降)
概要
Chrome、Firefox、および新しいバージョンの Internet Explorer では、クロスオリジン リソース シェアリング標準が適用されるため、適切な「Access-Control-Allow-Origin」レスポンス ヘッダーが付いたウェブフォントのみがレンダリングされます。Google Fonts はどのドメインでも表示できるため、次のレスポンス ヘッダーでフォントが提供されます。
Access-Control-Allow-Origin:*
考えられる原因
一部のプロキシでは、レスポンスからヘッダーが削除されることがあります。その後、ブラウザでフォントはレンダリングされません。
診断
Chrome の場合は、DevTools コンソールで関連する警告メッセージを確認します。
Firefox では、Firebug または Live HTTP Headers の拡張機能を使用して、レスポンス ヘッダーを表示し、CORS レスポンス ヘッダーの存在を確認できます。
リンク
NoScript プラグインがインストールされていると、Firefox でウェブ フォントが表示されない
ブラウザ: * Firefox(3.5 以降)
概要
NoScript プラグインがインストールされている場合、Firefox ではウェブフォントは表示されません。
考えられる原因
デフォルトでは、NoScript プラグインは @font-face ルールを無効にします。
解決策
NoScript オプションを開き、[Embeddings] タブに移動して [Forbid] @font-face のチェックボックスをオフにします。
ウェブ フォントが表示されない
ブラウザ: * すべて
概要
使用したウェブフォントは表示されません。
考えられる原因
API の URL にエラーがあるか、フォントでサポートされていないスタイルがリクエストされています。
解決策
URL の形式を適切にし、フォント名(例: Droid Serif ドロイド セリフ)で大文字と小文字を区別する必要があります。また、ウェイトとスタイルの構文に加えて、複数のファミリーを読み込む構文を優先してください(スタートガイド - 構文を参照)。フォントが表示されない場合は、スタイルシートの内容を見ることで、問題の詳細を確認できます。URL をコピーしてブラウザに貼り付け、エラー メッセージが表示されていないことを確認します。たとえば、Droid Serif でサポートされていない重み付けをリクエストすると、次のエラー メッセージが表示されます。
/* Droid Serif (style: normal, weight: 300) is not available */ /* However, style: normal, weight: normal is available */ /* However, style: italic, weight: normal is available */ /* However, style: normal, weight: bold is available */ /* However, style: italic, weight: bold is available */ /* Not supported. */
見出しで使用するとウェブ フォントが太くなる
ブラウザ: * すべて
概要
見出し(h1、h2 など)に使用すると、フォントが通常の(400)ウェイトであるにもかかわらず、フォントが太くなります。
考えられる原因
ブラウザでテキストが自動的に太字になりました。
解決策
ヘッダーにフォントを適用する際は、CSS ルールで適切な font-weight が指定されていることを確認します。
h1 { font-family: Lobster, cursive; font-weight: 400; }