クロスオリジン リソース シェアリング（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;
}