もくじ

【DTPからwebサイトまで】初心者でも使いやすいAdobe Fontsの使い方

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
今回はAdobeを使うならとっても便利な『Adobe Fonts』の使い方について解説します!

Adobe Fontsとは

Adobeのサービスの1つで、Adobe製品はもちろん、webサイトにも利用できるwebフォントサービスです。
PhotoshopやIllustratorでAdobe Fontsにある好きなフォントを利用できます。また、自分で作ったwebサイトにAdobe Fontsをwebフォントとして利用できる、便利なサービスです。

商用利用について

Adobe Fontsの商用利用は可能です。またAdobe Fontsを使用した製品にクレジットをいれる必要もありませんので、商用利用不可のフリーフォントとは違い、さまざまなプロジェクトに対応できるため非常に便利です。
ただしフォント個々の文字・字形のデザインをそのまま使った製品を販売したり、フォントそのものを販売することはできません。

どのようなフォントがあるの?

オーソドックスなセリフやサンセリフ以外にも、ちょっと変わったユニークなデザイン書体もあります。
少し前までは日本語フォントは少なかったですが、現在は400以上(2021年5月現在)の日本語フォントがあり、モリサワのフォントも利用できます。
Adobe Fonts日本語書体一覧

値段は?どうやったら使えるようになる?

Adobe IDを作成し、無料のCreative CloudアプリをダウンロードすればAdobe Fontsの利用可能です。しかしフォント数には制限があります。
Adobeの有料プランであればどのプランにも含まれていますので、Adobe Fontsを制限なくすべてのフォントを利用したいであれば、ソフトの単体プランもしくはコンプリートプランのいずれかのプランを契約する必要があります。
残念ながらAdobe Fonts単体のプランはありませんが、一番安いフォトプラン(1,078円/月)でもAdobe Fontsを使うことができます。

Adobe Fontsの利用方法

まずはAdobe IDを作成し、Creative Cloudアプリをダウンロードしましょう。
Creative Cloudアプリをダウンロード
ダウンロードしたCreative Cloudを開くと、右上にfアイコンがあるので、そちらをクリックします。
Creative CloudアプリのAdobe Fontsアイコン
ダウンロード時にすでに入っているものもありますが、使うフォントを選びたい場合は、『別のフォントを参照』をクリックしてください。
Adobe Fontsで他のフォント参照するには
クリックするとwebブラウザが自動で開き、Adobe Fontsの公式webページに遷移します。
Adobe Fontsの公式ページ

フォントを選び、Photoshopなどのソフトで利用しよう!

今回は明朝書体の中から良いものを選んで使用してみたいと思います。
一覧の中から気になるフォント(今回はモリサワの『A-OTF 太ミンA101 Pr6N』を選択)を選び、クリックする(もしくは『ファミリーを表示』をクリック)と詳細ページに移ります。
モリサワの『A-OTF 太ミンA101 Pr6N』を選択
詳細ページの方で『1個のフォントをアクティベート』を有効にすると、先ほどのCreative Cloudに反映されます。
Adobe Fontsをアクティベートする
Creative Cloudでアクティベートされたフォントが表示されているか確認すると、ありました!これでPhotoshopなどのソフトでも利用が可能になりました!
Creative Cloudでアクティベートされたフォントが表示されているか確認

Photoshopでアクティベートしたフォントを使ってみる

まずはPhotoshopを立ち上げ、適当にテキストを入力し、フォントを変更してみます。
今回はモリサワの『A-OTF 太ミンA101 Pr6N』をアクティベートしてみたので、『A-OTF 太ミンA101 Pr6N』があるか探してみると、ありましたね!
Photoshopでアクティベートしたフォントがあるか探す
無事アクティベート完了しています。これでAdobeのソフトならどれでもAdobe Fontsを使えることがわかりました!

webサイトでwebフォントとして使ってみる

今度はwebサイトで、webフォントとして利用してみましょう!

1.まずはフォントを選びコードを取得する

Adobe Fontsのwebページに戻り、フォントの選択画面でwebサイトに表示したいフォントを選びます。今回はちょっと特徴的な「どんぐり かな」を使用してみます。
Adobe Fontsでどんぐり かなを使用する
</>このアイコンをクリックすると『新規Webプロジェクトの作成』というポップアップが表示されます。
このとき『詳細はこちら』をクリックすると利用方法についての解説ページに飛びます。
『OK』をクリックすると『Webプロジェクトにフォントを追加』に移ります。
新規Webプロジェクトの作成
『新しいwebプロジェクト名を入力』に任意の名称(今回はsiteと入力しましたが、日本語でもなんでも良いです。何に使うのかかわかりやすい名称を付けましょう)を付け、作成ボタンを押します。
webプロジェクトにフォントを追加
するとこのようなコードが生成されます。これをHTMLファイルの<head></head>タグ内にコピペします。
webフォント用のコードの生成

2.webサイトで使う

<script> 〜 </script>の方は、HTMLファイルの<head></head>タグ内にそのままコピペします。
HTMLに追加
その下にある『追加されたフォント:』のfont-familyの方は、CSSの方で使います。
今回はCSSのbodyタグに入れて、サイト全体に適用してしまいます。
CSSに追加
するとこんな感じになりました!
PCにデフォルトで入っているフォントから、どんぐりかな文字に変換されてますね!
An image from Notion

間違えて先ほどの画面を閉じてしまったら

先ほど生成されたコードの画面を誤って閉じてしまっても、大丈夫です。
『My Adobe Fonts』をクリックすると、自分が管理しているフォントをみることができます。
My Adobe Fontsをクリックする
『Webプロジェクト』というタブを開くと、先ほど作ったプロジェクトが表示されますので、心配はありません。
Webプロジェクトを確認する
画面にはHTMLファイル用のscriptタグしか表示されていませんが、『プロジェクトの編集』を開き、『CSSをコピー』のところでコピーマークをクリックすれば、CSSもコピーできます。
作ったWebプロジェクトのCSSをコピーする

まとめ

ロゴマークやタイトルなどちょっとしたところで使いやすいAdobe Fontsは、web制作初心者でも簡単に使うことができます。
これからちょっとフォントを増やしたい、webフォントを使って見たい人は是非利用してみましょう!
webフォントを増やすとサイトが重くなってしまうので、本当に使いたいものだけを選択するように注意してください。
Adobeにはwebサイト制作に便利なソフトたくさんあるので、これからアニメーションバナーなども作ってみたいと言う人には、Adobeのすべてのソフトを使えるAdobeCCコンプリートプランがオススメです!
いろいろなソフトでAdobe Fontsを活用してみてください。
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。