- Adobe Fonts ユーザガイド
- はじめに
- フォントのライセンス
- フォントの入手と使用
- Creative Cloud アプリケーションでの Adobe Fonts の使用
- フォントの管理
- デスクトップアプリケーションでの見つからないフォントの解決
- InDesign でのフォントの使用
- フォントとタイポグラフィ
- HTML5 Canvas ドキュメントでの web フォントの使用
- InCopy でのフォントの使用
- Muse での web フォントの使用
- フォントファイルのパッケージング
- トラブルシューティングガイド:フォントの追加
- 追加したフォントがフォントメニューに表示されない
- 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
- 現在使用しているフォントがフォントメーカーによって更新された場合
- Web デザインと開発
- Web サイトへのフォントの追加
- トラブルシューティングガイド:web サイトへのフォントの追加
- フォントの問題のトラブルシューティング
- HTML 電子メールまたはニュースレターでの web フォントの使用
- Accelerated Mobile Pages(AMP)を使用した web フォントの使用
- CSS セレクター
- font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
- 埋め込みコード
- ダイナミックサブセットと web フォント提供
- フォントイベント
- Web フォントが use.typekit.net から読み込まれるのはなぜですか。
- サイトが use.typekit.net に接続できない
- CodePen での web フォントの使用
- ブラウザーと OS のサポート
- ドメイン
- ローカル開発環境での web フォントの使用
- コンテンツセキュリティポリシー
- Web フォントの印刷
- 言語サポートと OpenType 機能
- フォント技術
コンテンツセキュリティポリシー(CSP)は、web サイトで使用できるスクリプトやリソースを制限するために使用されます。例えば、CSP を使用して、web サイトでの外部スクリプトの実行を阻止することができます。
CSP と Adobe Fonts の併用は推奨されません
CSP とアドビの web フォントを同じページで使用することは可能ですが、推奨されません。 CSP ポリシーでは、特定のドメインからスクリプトによって追加されるインラインスタイルの例外を設定できません。スタイルの例外として unsafe-inline を指定すると、すべてのドメインのあらゆるスタイルに適用されます。
Adobe Fonts では、サービス提供にあたり、インラインのスタイルやフォントをデータ URI として使用していますが、データ URI に対して例外を設定すると、CSP による多くの保護機能が無効になります。
CSP の使用
CSP を使用する場合は、以下の手順に従い、セキュリティディレクティブを正しく設定してください。これらの手順を正しくおこなわなかった場合は、不注意による web フォントサービス利用条件の違反となる可能性もありますので、ご注意ください。
最初に、アドビの CDN(use.typekit.net)からのスクリプトの読み込みを許可するディレクティブを設定します。
script-src 'self' use.typekit.net;次に、use.typekit.net からのスタイルシートの使用を許可し、unsafe-inline を指定して、use.typekit.net を含むすべてのドメインのスクリプトでインラインスタイルの使用を許可する必要があります。この設定は、フォントイベントを機能させるために必要です。
style-src 'self' 'unsafe-inline' use.typekit.net;最後の要件は、p.typekit.net からの画像の例外です。フォントが読み込まれると、このドメインからのトラッキング画像を使用してフォントの使用状況が計算され、フォントベンダーに適切な使用料が支払われます。
img-src 'self' p.typekit.net;オプションで、パフォーマンス指標の例外を追加できます。パフォーマンス指標はランダムな間隔で送信され、フォントネットワークのパフォーマンスを監視するために使用されます。
connect-src performance.typekit.net
これらのディレクティブを合わせて 1 つのポリシーを作成します。また、すべての HTTP(S) 応答に Content-Security-Policy ヘッダーを設定します。以前のバージョンの Chrome、Firefox および Safari がサポートされるようにするには、X-Content-Security-Policy ヘッダーと X-webKit-CSP ヘッダーも含める必要があります。詳しくは、W3C の CSP 仕様を参照してください。