Adobe FontsをWebフォントで使用する

Adobe Fontsを使ってWebフォントを実装する機会があったので、使用するまでの流れをメモ。

注意点

Adobe Fontsを使用する際の注意点ですが、Adobe FontsはAdobe CC内のサービスなので、Adobe CCへの登録が必要になります。
また、自分がAdobe CCに登録した上でWebフォントとして使用する場合、クライアントのサイト制作時には使用できないようです。(参考:フォントのライセンス)
クライアントのサイト制作で使用する場合、クライアント側で登録してもらう必要があります。

使用方法

Adobeアカウントでログイン後、フォント一覧から使用したいフォントを探します。

今回はFutura PTを試してみます。
画面右上の「Web プロジェクトに追加」をクリックします。

プロジェクト名を指定して、使用するフォントのウェイトとスタイルを選択します。

今回はプロジェクト名をsample、フォントの種類をMediumのみにしました。
作成をクリックします。

これでプロジェクトにフォントが追加されました。
完了画面に表示される以下のコードを使って埋め込みを行います。

<link rel="stylesheet" href="https://use.typekit.net/qfg6frd.css">

font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal;

Webフォントを表示することができました。
Webフォント埋め込みのデモページ