Adobe Webフォントの埋め込みコード発行方法

動作確認

このページは、2022年02月19日に作成したページです。
このページに掲載している仕様・機能・操作手順は、現在リリースされているバージョンと異なる場合がございます。

Adobe Fontをお客様のサイトで利用する前に

デザイナーの意向により、標準Fontでは無くAdobe Fontを使用する場合は、予めお客様自身のAdobe サブスクリプションライセンスの有無をお伺いします。

これは、お客様のWebサイトでAdobe Webフォントを利用するには、お客様自身のライセンスが必要となる為です。

 

 詳しくはこちらをご覧ください。

Adobe サブスクリプションライセンスをお持ちの場合は、デザイナーの意向通りAdobe Fontを使ったサイト制作を進行します。もし、ライセンスを持っていない場合や、ライセンス購入を見送る場合はAdobe Fontを使う事はできない為、無料で利用できるGoogle Fontなどの代替Fontを提案します。

 

Adobe Fontをお客様のサイトで利用する

Adobe Webフォントをお客様のWebサイトで利用する為には、お客様自身のAdobe サブスクリプションライセンスで発行した埋め込みコードが必要となります。

埋め込みコードには、そのライセンス固有のkitIdが記載されており、そのIDからどのAdobe Fontが利用可能な状態にあるのか?の認証がされます。

つまり、お客様自身のAdobe IDで

  1. 使用するFontをアクティベート(fontを有効にする)する
  2. そのライセンスで発行した埋め込みコードを取得する
  3. 取得した埋め込みコードを弊社に送信

していただく事が必要です。

埋め込みコードは、いつまで必要か?

本番化予定の3日前ごろまで、ご用意いただければ、いつでも構いません。

デザインが決定したら、コーディングを行いその時点でAdobe Fontを利用した状態で進行します。ただ、この段階では弊社所有のテストサーバー上で行う為、弊社のライセンスで発行したコードを利用して動作確認を行います。

従って、必要なのは本番化した時点からとなります。

 

埋め込みコードの発行手順

以下の手順は、2022年2月時点のAdobe Fontsのサイトを参考にしています。今後、Adobe Fontsサイトのリニューアル等により、手順が異なる場合がございます。より正しい手順はAdobe Fonts Web サイトへのフォントの追加をご確認ください。

  1. まずは、弊社から使用するFontのリストをお知らせします。

  2. 続いて以下サイトにアクセスしてください。

    Adobe Fonts

  3. 『ログイン』をクリックします。

    Adobe ログイン

     

  4. Adobe サブスクリプションライセンスを購入したAdobeアカウントでをログイン手続きをしてください。

    Adobe ログイン

     

  5. ログインすると、右上の様に変わります。検索ボックスで弊社からお知らせしたFont名を検索してください。

    Adobe Fonts 検索

     

  6. 結果表示されたフォント(お知らせしたFont名)の『ファミリーを表示』をクリックします。

    Adobe Fonts 検索

     

  7. 表示されたFontの『① ディアクティベート』をクリックして有効にします。

    複数ある場合は、全て有効にしてください。(フォントの太さ毎に出てくる為)

    続いて『② </>をクリックします。

    Adobe Fonts アクティベート

     

  8. 『① をクリックし『② 新規プロジェクトを作成』をクリックします。

    Adobe Fonts 新規プロジェクトを作成

     

  9. 『① 適当なプロジェクト名』を入力し『② 作成』をクリックします。

    新規プロジェクトを作成

     

  10. ① 表示されたコードをコピーして、テキストエディターなどを使って保存してください。

    Adobe Fonts コード

    保存したら、『② 終了』をクリックして閉じます。

     

  11. 保存したコードを当社までメール送付してください。

 

本番化時に、送付したコードに差し替えて本番化します。

このページの関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。