ワークスペースにAdobe Fontsを追加する

Adobe Fonts API トークンを Webflow ワークスペースに統合すると、Adobe Fonts Web プロジェクトをどのサイトでも利用できるようになります。

Adobe Fonts を Workspace に組み込むと、その Adobe Fonts をすべての Workspace サイトで利用できるようになります。さらに、同じ Webflow アカウント内の複数の Workspace で Adobe Fonts を活用できる柔軟性も得られます。

重要: Adobe Fontsをサイト内で使用するには、有効な ワークスペースプラン または有効な 敷地計画 必要です。

このチュートリアルでは、次のことを学習します。

  1. Adobe Fonts APIトークンを取得するプロセス
  2. APIトークンをワークスペースに統合する手順
  3. ワークスペースから API トークンを削除する方法
  4. ウェブプロジェクトを Webflow サイトに接続する
  5. Adobe Web プロジェクトとサイトの関連付けを解除する
  6. デザイナーでAdobe Fontsを活用する
  7. 統合の問題のトラブルシューティング

Adobe Fonts APIトークンの取得

API トークンを取得するには:

  1. 登録する Adobe Fonts アカウント
  2. ウェブプロジェクトの確立 Webflowサイトで使用するために希望のフォントで
  3. に移動 Adobe Fonts API トークン 新しい API トークンを作成するページ (以前に生成していない場合)
  4. 新しく生成されたAPIトークン(または既存のトークンがある場合はそれをコピーします)

Adobe Fonts Webプロジェクトの作成について詳しく見る.

APIトークンをワークスペースに統合する

API トークンをワークスペースに正常に埋め込むには:

  1. アクセス ワークスペース設定 > 統合 タブ > Adobeフォント
  2. Adobe Fonts APIトークンを指定されたフィールドに貼り付けます
  3. 選択する 変更内容を保存

ワークスペースからAPIトークンを削除する

ワークスペースから API トークンを削除する場合は、次の手順に従います。

  1. 案内する ワークスペース設定 > 統合 タブ > Adobeフォント
  2. トークンを消去する
  3. クリック 変更内容を保存

Web プロジェクトを Webflow サイトにリンクする

Adobe アカウントが Workspace にリンクされたので、Adobe Web プロジェクトを Webflow サイトに関連付けることができます。

Adobe Web プロジェクトとサイト間の接続を確立するには: 

  1. アクセス サイト設定 > フォント タブ > Adobeフォント
  2. 現在のサイトで使用するWebプロジェクトを選択してください
  3. クリック 変更内容を保存

Adobe Web プロジェクトをサイトから切断する

Adobe Web プロジェクトとサイトの関連付けを解除するには:

  1. 案内する サイト設定 > フォント タブ > Adobeフォント
  2. 選択する "なし
  3. クリック 変更内容を保存

デザイナーでAdobe Fontsを活用する

Designer で操作する場合、Adobe Web プロジェクトを通じて統合したすべてのフォントとフォントバリエーションに完全にアクセスできます。 

Adobeフォントは、 スタイルパネル > タイポグラフィ > フォントフォントリストの最後にアルファベット順で記載されています。

統合問題の解決

Adobe Fonts と Webflow の同期に障害が発生する場合があります。ただし、これらの問題は通常、いくつかの簡単な操作で解決できます。

よくある問題は次のとおりです:

  • デザイナーでのフォントの読み込みが正しくありません
  • サイト設定でWebプロジェクトを正しく読み込めない
  • サイト設定にWebプロジェクトがまったく存在しない

重要な: Adobe FontsはAdobe Creative Cloudサブスクリプションを通じて管理されますAdobe Fonts ライブラリから Web プロジェクトを削除したり、Adobe アカウントにアクセスできなくなったりすると、選択したフォントが読み込まれなくなる可能性があります。

重要: Adobe のネットワークの更新には最大 10 分かかる場合があります。Web プロジェクトやその中の更新が表示されない場合は、後で再度アクセスしてページを更新してください。または、Web プロジェクトを切断して再接続し、Adobe のネットワークから最新の情報を読み込みます。

これらの問題に対処するには、次の点を考慮してください。

  • Adobe システムと Webflow システムの両方が動作していることを確認する
  • APIトークンの正しい配置を確認してください
  • Adobe Fonts APIトークンの有効性を確認する
  • サイト設定で適切なWebプロジェクトが選択されていることを確認します

AdobeおよびWebflowシステムの動作状態を確認する

APIトークンの正しい配置を確認してください

Adobe Fonts API トークンがワークスペースに正常に追加されたことを確認します。

Adobe Fonts APIトークンを確認する

  1. Adobe Fonts APIトークンを見つけるには ワークスペース設定 > 統合 タブ > Adobeフォント
  2. 訪問 Adobe Fonts API トークン ページ
  3. Adobe Fonts APIトークンとワークスペースに接続されたトークンが一致していることを確認します

サイト設定で正しいWebプロジェクトが選択されていることを確認します

  1. 進む サイト設定 > フォント タブ > Adobeフォント
  2. 現在選択されているWebプロジェクト(境界線で表示)が正しいものであることを確認します。
ユアン・マック