ウェブフォント

Google Fonts や Typekit など、外部のウェブフォントをエディターにインポートできます。

ウェブフォントは、Creative Editor のウィジェット設定パネルから管理します。

対応フォントプロバイダー

Google Fonts

• https://fonts.google.com にアクセスします。
• 1つ以上のフォントファミリーとフォントウェイトを選択します。
• 提供された embed URL をウェブフォントマネージャーにコピーして貼り付けます。

Typekit

• https://typekit.com/account/kits にアクセスして、既存のフォントキットを表示するか、新しいフォントキットを作成します。
• キット設定のドメインリストに *.fanplayr.com が追加されていることを確認してください。これにより、Creative Editor でフォントを読み込み、プレビューできるようになります。
• 提供された Kit ID をウェブフォントマネージャーにコピーして貼り付けます。

カスタムフォントプロバイダー

他のプロバイダーのウェブフォント（または自己ホストしているフォント）をインポートするには、提供されるフォントとそれらを読み込むスタイルシートのURLを1つ以上記述するJSON設定を指定します。

要件

• スタイルシートのURLは絶対パスである必要があります。
• スタイルシートとフォントは、*.fanplayr.com からアクセスできるように、適切な CORS 設定が必要です。

例

以下のJSON設定例は、Googleから3つのフォントを手動でインポートする方法を示しています。この例は、他のドメインからフォントをインポートするように変更することもできます。

設定形式の詳細については、Web Font Loaderの仕様を参照してください。

{
  "families": ["Oswald:n3,n4,n7", "Indie Flower", "Lobster"],
  "urls": [
    "https://fonts.googleapis.com/css?family=Oswald:400,300,700|Indie+Flower",
    "https://fonts.googleapis.com/css?family=Lobster"
  ]
}

例：Google Fontsの使用

::: embed https://vimeo.com/193809440 Google Fontsからのウェブフォントのインポートと使用 :::