Webフォントとして日本語も使える!Adobe Fontsの使い方

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

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を解約したらこれらのフォントは使えなくなります。今まで設定していたフォントも非表示(デフォルト表示)になるので注意しましょう。

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)