Webフォントとしておしゃれなフォントが使えるサービスで人気なのがGoogle Fontsですね。無料で手軽に使える便利サービスです。しかし、Webフォントを提供しているのはGoogleだけではありません。デザイナー御用達のAdobeも「Adobe Fonts」を提供しています。今回はこのAdobe Fontsの使い方を紹介します。

↑私が10年以上利用している会計ソフト！

Adobe Fontsとは

Adobe FontsはAdobeが提供するフォントライブラリサービスです。以前は「Adobe Typekit」というサービス名でした。15,000 を超えるフォントから必要なだけ選択可能！使用フォント数に制限なし！Adobe CC会員なら追加料金なし！フォントは商用利用もOKです！無料のAdobeアカウントでも約200種類のフォントを利用できますよ。

PhotoshopやIllustratorなど、Adobeのツール内で自由に使えるようになります。また、Google Fonts同様、指定された簡単なコードを読み込ませるだけでWebサイト上に素敵なフォントを表示できます。

どんなフォントが使えるの？

フォント一覧をのぞいてびっくり！Adobeの有料プランの会員なら、15,000を超える個性豊かなフォントを使い放題！

日本語も数多く揃っています！フォント一覧画面の右上から「日本語モード」に切り替えて日本語フォントを探してみてください。

無料アカウントで使えるフォントは、現在180個。日本語フォントは源ノ角ゴシック、貂明朝、平成丸ゴシックなどの7つのフォントが使えます。

PhotoshopやIllustratorなどでフォントを使う

まずはPhotoshopなどのグラフィックツールでフォントを利用する手順を見ていきましょう。フォント一覧から使いたいフォントの「アクティベート」のスイッチをON！

Photoshopをひらくと、フォント一覧にアクティベート（有効化）したフォントが表示されています！

Adobe製品以外のツールでもフォントが使えます。こちらはAppleのPagesでフォントを表示した様子。

フォントが表示されない時

「アクティベートしたのにフォントが表示されない！」という方、焦らなくてOKです。Creative Cloudのデスクトップアプリを起動させましょう（上図のような赤いやつ）。起動していないとうまく同期されません。Creative CloudのデスクトップアプリはPhotoshopなどのAdobe製品をインストールしているなら、一緒にインストールされているはずです。

Creative Cloudアプリの「フォント」タブを見てみましょう。アクティベートされているフォントが一覧表示されます。これでもフォントが表示されない場合は、Photoshopを再起動してみてください。

Webフォントとしてフォントを使う

続いて、Webサイト上にフォントを表示する流れを紹介します。フォント一覧画面から使いたいフォントの </> アイコンをクリック。

「Web プロジェクトにフォントを追加」パネルが表示されるので、わかりやすいプロジェクト名を入力し、「作成」ボタンをクリックします。

コードが表示されるので、指示通り head タグ内に <script> から始まるコードを記述。JavaScriptファイルに記述する場合は <script> と </script> を除いて記述しましょう。

CSSには font-family: 部分のコードを記述します。例えば以下のように h1 タグに反映させたいときはCSSに以下のように書きましょう。

h1 {
  font-family: a-otf-jun-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
}

こんな感じで実装できました！

See the Pen
Adobe Fonts Demo (Japanese) by Mana (@manabox)
on CodePen.

Adobe Fontsを使えばフォントをインストールしたり、Webフォント化する手間もありません。ドキュメント作成、デザインカンプ制作からWebサイトに実装するまでの流れがスムーズに行えますね。

注意点としては、当たり前ではあるのですがAdobeを解約したらこれらのフォントは使えなくなります。今まで設定していたフォントも非表示（デフォルト表示）になるので注意しましょう。