Adobe Typeスタイルを特定のWebサイトに組み込む

クライアントの Adobe Fonts API トークンをそのサイトに統合して、そのサイトで Adobe Fonts Web プロジェクトを利用できるようにします。

別のセッションでは、Adobe Type スタイルを Webflow ワークスペースに埋め込み、すべての Web サイトで Adobe Type スタイルにアクセスできるようにするプロセスを紹介します。ただし、顧客向けの Web サイトを構築していて、その特定の Web サイトでのみ Adobe Type スタイルを使用したい場合は、顧客専用の Adobe Type API トークンを生成し、それを Web サイトに統合することをお勧めします。

この方法論を選択する理由は 2 つあります。

  • Adobe は、2020 年から顧客に個別の Adobe アカウントを所有することを義務付けるポリシーを開始しました。 Adobe Typeスタイルのライセンスに関する詳細をご覧ください.
  • お客様は独自のフォントキットのセットを所有することになり、Web サイトを移行したい場合、移行プロセスは大幅に効率化されます。
リマインダー: Adobe Typeスタイルをウェブサイトに埋め込むには、有料の ワークスペースプラン または有料 敷地計画.

このディスカッションでは、次のことを理解できます。

  1. Adobe Type APIトークンを取得する方法
  2. APIトークンをウェブサイトに埋め込むプロセス
  3. ウェブサイトからAPIトークンを削除するテクニック
  4. Adobe WebプロジェクトをWebサイトにリンクする手順
  5. Adobe WebプロジェクトをWebサイトから切り離すテクニック
  6. デザイナーで書体を評価する方法
  7. 統合の困難に対処するためのアプローチ

Adobe Type APIトークンを取得する方法

顧客が Creative Cloud アカウント (Adobe ID)、API トークンを送信するよう依頼します。Creative Cloud アカウントを持っていない場合は、個別の無料アカウントを作成して API トークンを提供するよう依頼します。

あるいは、ユーザーのログイン認証情報を使用して設定し、ユーザーに制御を移すオプションもあります。これにより、ユーザーは自分のフォント スタイルの制御を維持できるため、個人の Creative Cloud アカウント内でそれらのスタイルを管理する必要性が軽減されます。

自分でアカウントを設定し、APIトークンを取得する

自分でアカウントを作成する場合は、次の手順に従ってください。

  1. 作成する Adobe Typeアカウント
  2. Webプロジェクトを生成する 顧客のウェブサイトで使用したい書体を活用する
  3. に移動 Adobe Type API トークン ページ 新しいAPIトークンを確立する
  4. APIトークンをコピーする

顧客にAdobe Type APIトークンの提供を依頼する

顧客に独自のアカウントを作成して API トークンを転送してもらいたい場合は、次の手順で顧客に指示してください。

  1. Adobe Typeアカウントを作成する (持っていない場合)
  2. Webプロジェクトの構築 以下の書体を使用します。 [ウェブサイトで利用したい書体の名前を入力してください]
  3. アクセス Adobe Type API トークン ページ 新しいAPIトークンを生成する
  4. APIトークンをコピーして私に転送してください

APIトークンをウェブサイトに組み込む方法

APIトークンを取得したら、Webflowウェブサイトの Adobe 書体 設定。APIトークンをウェブサイトに含めるには:

  1. 案内する サイト設定 > フォント タブ > Adobe 書体
  2. Adobe Type APIトークンを指定された領域に貼り付けます
  3. クリック トークンを保存

ウェブサイトからAPIトークンを削除する方法

ウェブサイトから API トークンを削除したい場合は、次の手順に従います。

  1. アクセス サイト設定 > フォント タブ > Adobe 書体
  2. トークンを消去する
  3. クリック トークンを保存

Adobe Web プロジェクトを Web サイトに結び付ける方法

APIトークンを介してAdobeアカウントをウェブサイトにリンクすると、ウェブサイトのすべての書体を含むAdobeウェブプロジェクトが下に表示されます。 Adobe 書体 セクションの サイト設定.

Adobe Web プロジェクトを Web サイトと結合するには:

  1. 案内する サイト設定 > フォント タブ > Adobe 書体
  2. 関連付けるWebプロジェクトを選択してください
  3. クリック 変更内容を保存

Adobe Web プロジェクトを Web サイトから切り離す方法

Adobe Web プロジェクトを Web サイトから分離するには:

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

デザイナーで書体を検証する方法

Designer 内では、Adobe Web プロジェクトを通じて含めたすべての書体とフォントバリエーションに完全にアクセスできます。 

Adobeの書体は、 スタイルパネル > タイポグラフィ > フォントAdobe の書体は、フォント選択の最後にアルファベット順にリストされます。

スタイル パネルのタイポグラフィ セクションでフォント ドロップダウンが強調表示されます。

統合の課題に対処する方法

場合によっては、Adobe Type スタイルの統合で Webflow との同期の問題が発生することがあります。通常、これらの障害は、いくつかの簡単な手順を実行することで解決できます。

一般的な懸念事項としては次のようなものがあります。

  • デザイナーで書体が正しく読み込まれない
  • サイト設定でWebプロジェクトが正しく読み込まれない
  • サイト設定でWebプロジェクトが完全に読み込まれない

重要な:Adobe TypeスタイルはAdobe Creative Cloudサブスクリプションによって管理されますAdobe Type スタイルライブラリから Web プロジェクトを削除した場合、または Adobe アカウントにアクセスできなくなった場合は、選択した書体が読み込まれない可能性があります。

リマインダー: Adobe のネットワークが更新されるまでに最大 10 分かかる場合があります。そのため、Web プロジェクトまたは Web プロジェクトの変更が反映されない場合は、後で再度ページにアクセスして更新してください。または、Web プロジェクトのバインドを解除して再度選択し、Adobe のネットワークから最新のデータを読み込むこともできます。

これらの問題を解決するには、次の点を調べます。

  • Adobe システムと Webflow システムの両方が動作していることを確認する
  • APIトークンが正しい場所に組み込んでいることを確認してください
  • Adobe Type APIトークンを確認してください
  • サイト設定で正しいWebプロジェクトが選択されていることを確認します

AdobeおよびWebflowシステムが動作していることを確認する

APIトークンが正しい場所に統合されていることを確認してください

Adobe Type API トークンが Web サイトに追加されていることを確認してください。

Adobe Type APIトークンを確認してください 

  1. Adobe Type APIトークンを以下から見つけてください。 サイト設定 > フォント タブ > Adobe 書体
  2. 進む Adobe Type API トークン ページ
  3. Adobe Type APIトークンが、WebサイトにリンクしたAPIトークンと一致していることを確認します。

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

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