Adobe Fonts（旧Typekit）を使ってみる

『Adobe Fonts』はAdobe社が提供するフォントライブラリサービスです。
以前は『Typekit』という名前でしたが、改称に伴い複雑な利用制限が全て撤廃され、かなり使いやすくなりました。

変更点について詳しくはこちら
『Typekit』から『Adobe Fonts』への変更点

使えるフォントの数はAdobe一般ユーザーで182個、
AdobeCCユーザーはさらに1557個を使用できるとのことです。（※2019/05/07現在）
商用利用可でクライアントのプロジェクトでも利用可と、とても使い勝手が良いです。

詳しいライセンスについてはこちら
『Adobe Fonts』のライセンス

今回はその『Adobe Fonts』の使い方を紹介します。

『Adobe Fonts』の使い方

まずAdobe Fonts公式サイト右上にあるログインボタンからログインしてください。
（AdobeIDを持ってない方は登録してください。）

Adobe Fonts公式

左のメニューで明朝体・ゴシック体などの種類を選択します。
言語選択の欄に日本語がありませんが、
日本語フォントを使いたい場合は右上の日本語モードをクリックしてください。

お気に入り（♡ボタン）…ブックマーク

ブックマークです。

WEBプロジェクト（＜/＞ボタン）…WEB上で使用

WEB上で使う場合こちらをクリックしてWEBプロジェクトにフォントを追加します。
（旧Typekitでは、特定サイトのフォントを1つにまとめたものをキットと呼んでいましたが、
Adobe fontsでは『Webプロジェクト』と呼びます。）

アクティベート…ローカルPC上で使用

『Creative Cloudデスクトップアプリ』をインストールしていれば、
一般ユーザーでもローカルPC上で（イラレ・フォトショはもちろん、ワードなどでも）フォントが使えます。

『Adobe Fonts』をWEB上で使ってみる

さっそくWEB上でフォントを使ってみたいと思います。

WEBフォントのメリット・デメリットなどは、以前の記事で詳しく触れていますのでそちらをご覧ください。→「そろそろ行けるか？Webフォント」

今回は日本語の貂明朝を使ってみます。

各フォントのWEBプロジェクト（＜/＞ボタン）をクリックすると次の画面が現れます。

まずWebプロジェクトを作成します。
サイト名などお好きな名前を付けてください。
（今回は「サンプルサイト」と名付けました。）
使いたいフォントの太さにチェックして、『作成』ボタンをクリックします。

表示されたコードをサイトのheadタグ内にコピぺします。
使いたい箇所のタグに表示されたスタイルシートを適用してください。
これだけで表示されます。とっても簡単ですね。

注意点

Webプロジェクトを削除してしまうと、そのコードを使用したサイトのフォントは使えなくなります。特に公開中のサイトなどで使用する場合は気を付けましょう。

まとめ

AdobeCCユーザーは一部のモリサワフォントなども使えます。
日本語WEBフォントの選択肢が増えて嬉しい限りですね。

ですがWEBフォント自体はどうしても表示に時間がかかってしまうので多用には気を付けましょう。

関連：GoogleFontsについてはこちら