こんにちは！
上毛印刷WEB制作担当のソーヤです。

みなさん、Google Fontsは知っていますか？
WEBに関するお仕事をされている方なら常識ですよね。
でも、こんな便利なサービスが存在していることをご存知でしょうか。

Adobe Fonts

Adobe Fontsとはアドビ社が提供しているフォントサービスでGoogle Fontsと同じような要領で使用できます。
公式サイトはこちら（外部リンク）

以前、築紫フォントを見出しのデザインで作ったサイトを手掛けたのですが、築紫フォントがGoogle Fontsになかったので、画像対応にするか迷っていました。
コーダーにとって画像対応はできれば避けたいところなので、どうにかできないか探っていたらAdobe Fontsと出会いました。

衝撃でした・・・
こんな便利なものがあったのかと

Adobe Fontsの使い方

もちろんアドビ税は払っていますよね。
でしたら使用可能です。
公式サイト（外部リンク）にアクセスします。

まず画面右上の「ログイン」で普段使っているAdobeアカウントでログインします。
そうしたら画面中央の検索フォームで使用したいフォントを検索します。

↓↓↓

「筑紫」で検索したら、こんな感じで4つの検索結果が出て来ました。
使いたいフォントの「ファミリーを追加」ボタンをクリックした後、すぐ横にある＜/＞のマークをクリック。

↓↓↓

そうしたらこのようなモーダルウィンドウが出てくるので、
赤枠内の部分でプロジェクトを定義してください。
定義したら右下の「作成」ボタンをクリック。

↓↓↓

そうしたら、上の赤枠にJavaScriptが出力されるので、HTMLの＜head＞タグ内に埋め込んでください。（jsファイルの中でも使用可能みたいです。）
で下の赤枠にCSSが出力されるので、使用したいフォントのクラスを定義しましょう。

これでAdobe Fontsが使用できます！

試し書き

cool font

まとめ

Adobe Fontsにはかなりユニークなフォントが揃っているので、
デザイナーの方と情報共有して、色々かっこいいサイトを作ってみてください！