Adobe Fontsの使い方

デザイン

使用条件

Adobe Creative Cloudのアカウントを持っていること。
Adobe製品を購入していない、Creative Cloud 無償メンバーシップの方でも利用可能です。

参考)Creative Cloud 無償メンバーシップ登録ページ

Adobe Fontsのリストから使用するフォントを選択

Adobe Fontsのフォント一覧ページを開きます。

フォント一覧ページでは、「言語」「(フォントの)分類」などでフィルタリングをかけることができます。

目的のフォントの絞り込みをします。
今回は、「日本語」「ゴシック」で絞り込みします。

今回は、一覧から「源ノ角ゴシック(Source Han Sans)」を選択(クリック)します。

Adobeソフト(ローカル)で使用する場合

詳細ページにて、使用したいフォントをアクティベート(有効化)します。

「Normal」「Regular」「Medium」など、使用するフォントの太さを選ぶことができます。
全てのフォントを使用する場合は、右上にある「○個のフォントをアクティベート」をONにします。

Adobeのソフト(Photoshop、Illustratorなど)を開くと、アクティベートしたフォントを選択(使用)できるようになります。

以下はXDでのフォント選択画面です。

WEBフォントとして使用する場合

使用するフォントの左上にある[</>]のエリアをクリックします。

Wenプロジェクトにフォントを追加する画面が表示されるので、「新規プロジェクトを作成」より任意のプロジェクト名を設定し、「作成」ボタンをクリックします。

作成したプロジェクトが表示され、JavaScriptに設定するソースと、CSS(styleシート)に設定するソースが表示されます。

ソースをコピーし、フォントを取り込みたいサイトに設定します。

Adobe Fontsを設定したサンプルページはこちら

注意事項

Adobe Fontsサイトでアクティベートした後でも、ローカルのAdobeソフトに設定が反映されないことがあります。

時間がかかる場合もあるようです。
私の場合は、XDやPhotoShopのソフトの再起動なども試してみたりしましたが、30分経っても反映されないことがありました。

パソコンを再起動した際に、ソフトの方にもアクティベートが反映されました。
原因と改善は何パターンかあるようです。

パターンごとの詳細、対処方法、こちらの記事を参考にしました。
「Adobe fonts」がCCに同期できない不具合が発生!詳細や対処法を徹底解説

タイトルとURLをコピーしました