Tag Archive web font

動作確認

このページは、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. 保存したコードを当社までメール送付してください。

 

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

このページの関連記事

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

動作確認

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

Adobe Creative Cloud のライセンスに含まれる Adobe Fontsは、各種フォントが使い放題な上、WEBフォントも利用可能です。

従って、デザインする際にAdobe Fontsに含まれるFontを利用しているデザイナー様がおりますが注意が必要です。

 

Adobe Fontを画像の一部として使う場合

画像の一部として使う場合は、問題ありません。ただしそのテキストは画像としてしか使えません。

以前はこの様にモリサワのFontなど有償Fontを使った文字でテキストを表示したい場合は、画像として表示していました。それだとSEO的な効果が見込めないので、テキストで入れた文字をCSSで隠して、その部分に文字画像を背景として設定するという事をしていました。

昨今のトレンドは、文字は画像を使わずテキストとしてHTML内に入力して、FontはWebFontを使って、好みのFontに指定するという方法が一般的です。その様な方法を取る事で、様々なメリットがあります。

Web Fontを使えば、指定したFontがインストールされていない環境でも、同じFontで表示する事が可能です。

 

Adobe Fontsを使う時の注意点

Adobe FontsはWebFontとして利用する事ができるので、デザインしたWebサイトに使う事も可能ですが注意が必要です。なぜならばデザインしたWebサイトでAdobeのWeb Fontで使用するには、そのWebサイトの所有者(クライアント)のAdobe サブスクリプションライセンスである必要がある為です。

つまり、デザイナー様のライセンスや弊社のライセンスを利用してしまうとWeb Font使用の再販という事になりライセンス違反となります。

従って、Adobe Fontを利用する場合は、予めクライアント様がAdobe サブスクリプションライセンスを持っているのか?持っていない場合は購入していただく事が出来るか?の確認を取る必要がございます。

 

Adobe Fontsが利用できる場合

クライアント様がライセンスを所持している(又は購入予定)場合は、Adobe Fontを利用して構いません。

テスト環境の段階では、弊社のサブスクリプションライセンスを使って開発します。公開段階の前に、クライアント様のライセンスで利用しているAdobe Fontをアクティベートしていただき、発行されたscriptタグに差し替えた上で公開します。

このページの関連記事

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