クロスオリジン リソース シェアリング（CORS）レスポンス ヘッダーがない
ブラウザ:
- Firefox（3.5 以降）
- Internet Explorer（9 以降）
- Chrome（37 以降）
概要
Chrome、Firefox、および Internet Explorer の新しいバージョンでは、 サポートされているため、サービスで提供されるウェブフォントのみをレンダリングできます。 適切な「Access-Control-Allow-Origin」レスポンス ヘッダー。Google Fonts は、 任意のドメインで表示できる場合、フォントは header:
Access-Control-Allow-Origin:*
考えられる原因
プロキシによっては、レスポンスからヘッダーが削除されることがあります。その後、ブラウザは フォントは表示されません。
診断中
Chrome で、関連する警告メッセージが DevTools コンソール。
Firefox では、Firebug または Live HTTP Headers 拡張機能を使用して レスポンス ヘッダーを表示して、CORS レスポンス ヘッダーの存在を確認します。
リンク
NoScript プラグインがインストールされている場合、Firefox でウェブフォントが表示されない
ブラウザ: * Firefox（3.5 以降）
概要
NoScript プラグインがインストールされている場合、Firefox ではウェブフォントが表示されません。
考えられる原因
NoScript プラグインはデフォルトで @font-face ルールを無効にします。
解決策
NoScript オプションを開き、[エンベディング] タブに移動して [Forbid] チェックボックスをオフにします。 @font-face
ウェブフォントが表示されない
ブラウザ: * すべて
概要
使用しているウェブフォントが表示されない。
考えられる原因
API の URL にエラーがあるか、フォントがサポートしていないスタイルです が要求されました。
解決策
URL の形式が正しいこと、 フォント名（例: Droid Serif ではなく 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 ルールで正しいフォントの太さが指定されていることを確認します。 ヘッダーにフォントを適用するには:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}