移転代行サービス無料キャンペーン中。WordPressの移転もOK。
Adobe Fontsは、無料登録だけで利用できてWebフォントも利用できるサービスです。Adobe Fontsの使い方と無料でも使えるおすすめフォントを紹介します。
Adobeというとプロが使う高価なソフト、というイメージがありますね。
確かにAdobeのサブスクリプション（有料プラン）を利用していればAdobe Fontsは使い放題で使えるのですが、無料会員のままでも利用できるのです。
さらにフォントをダウンロードしたりインストールする必要がなくて、簡単に利用できます。
Adobe Fontsはロゴ制作や印刷物など商用利用に使える他、Adobe以外のソフト、パワーポイントとかでも使えるので、企画書のデザイン性を高めたいときにおすすめです。
- Adobe Fontsでできることを知りたい
- Adobe Fontsの使い方を知りたい
- Adobe Fontsでおすすめのフォントを知りたい
という方に、Adobe Fontsの使用条件から使い方、おすすめのフォントまで丁寧に解説します。
Adobe Fontsと同じように無料で利用できるGoogleフォントについておすすめの記事↓
Helvetica,Futura,DINなど有名フォントの代わりになる?おすすめGoogleフォント
Adobe Fontsとは
元はTypekitという名称で提供されていたフォントサービスがAdobe Fontsになり、その内容も大幅に使いやすくなりました。
Adobe Fontsの特徴
- Adobe Creative Cloudサプスクリプションの有料会員のほか、無料会員でも利用可能。（利用できる種類が少なくなる）
- 同期できるフォントの制限なし
- WebフォントはWebサイトのページビュー制限、ドメイン制限なしで利用可能
- すべてのフォントがデスクトップでもWebでも利用可能
- Adobeアプリ以外でも利用可能（PowerPointなどOffice製品など）
- 日本語フォントの種類が多い
- 有名フォントメーカーのフォントが利用できる（モリサワ,フォントワークスなど）
Typekit時代は、プラン内容によって制限があったりしましたがAdobe Fontsになって制限が撤廃されて制限なく利用可能になりました。
Adobe無料メンバーシップ
（AdobeIDを無料取得）
6,000種類のフォントを利用可能
Adobe CCサブスクリプション
（単体プランでもOK）
20,000種類以上のフォントを利用可能
有料プランならすべてのAdobeFontsにアクセスできます。無料プランでも6000種類のフォントが利用可能。
無料で使える日本語フォントも種類が結構あります。（詳しくは後述で）
ライセンスもかなり自由度があります。
Adobe Fontsで許可されること
- すべてのフォントで個人利用、商用利用の両方OK
- ロゴ制作や画像制作、クライアントへ提供する印刷物に利用可能
- Adobe Fontsで制作したロゴを著作権で保護したり、商標登録することができる
- Adobe Fontsを使ってTシャツのデザイン、商品パッケージなど商品に使用できる
- 書籍や雑誌など市販目的の商品に利用できる
- Webフォントとして利用可能
- PDFにフォントを埋め込んで表示、印刷が可能
- 商用の動画コンテンツでフォントを利用可能
Adobe Fontsで許可されていないこと
- フォント1文字からなる製品（ステンシル、ステッカー、ジュエリーなど）を作ること
- 自分が販売したデザインをクライアントがカスタマイズすること
- クライアントのWebサイトで自分のライセンスでWebフォントを利用すること
Adobe Fontsの使い方
Adobe Fontsを使うにはまずAdobe IDを取得します（無料）。
Adobeのログインからアカウント作成をします。
ログイン画面が開いたら、アカウント作成をクリックして情報を入力します。
無料会員のままAdobe Fontsを利用する
Adobe Fontsのサイトにアクセスして、利用したいフォントをアクティベートするだけです。
無料で使えるフォントだけ見たい場合は
「すべてのフォント」を選んで左上にある「Creative Cloudで利用可能なフォントを表示」のチェックを外します。
無料のまま利用できるフォントだけが表示されます。2022年9月時点で339個のフォントファミリー、日本語だと97個フォントファミリーがありました。（フォントファミリーで表示されているので総数はわかりませんが）
日本語で絞り込むと97個フォントファミリー
ハートアイコンをクリックするとお気に入りに登録できます。
フォントをアクティベートする
使いたいフォントが見つかったら、右上にある「フォントをアクティベート」のトグルボタンをスライドさせてONにするだけです。
フォントの管理や複数PCで使いたい場合はCreative Cloudアプリをインストールしておくと良いでしょう
Adobe CCアプリを利用していればCreative Cloudデスクトップは既にインストールされています。
利用するアプリケーションを開いてフォントを選択するだけ
PowerPointで使いたいなら、パワポを開いて文書を作成したら、フォントメニューからフォントを選択するだけでOKです。
IllustratorのCS2でもいけました。
Adobe Fontsが反映されない、同期されないときはこちらが参考です↓
-
-
Adobe Fonts 反映されない、同期されないトラブルの対処法
IllustratorやPhotoshopでフォントを追加したいときにアクティベートができない、アクティベートしたのにフォント一覧に反映されない、フォントが同期されないなど、Adobe Fontsのよ ...
続きを見る
Adobe CC有料会員ならアプリから利用可能
Adobe CCコンプリートプランやIllustratorCC、PhotoshopCCのサブスクリプション利用しているなら、アプリからも利用できます。
Illustratorでは直接アクティベートすることができます。
Photoshopでは直接アクティベートはできませんが、Adobe Fontsへリンクがあります。
Webフォントの利用方法
Webフォントとして使いたい場合もコードをコピペするだけ、簡単です。
使いたいフォントの</>のアイコンをクリックします。
Webプロジェクトにフォントを追加します。
Webフォントは「プロジェクト」という単位で管理され、後から編集したりフォントを追加することができます。
Webプロジェクト名は、ドメインやサイト名など、わかりやすい名前をつけておきます。
埋め込みコードが生成されます。<head></head>内にコードを貼り付けます。
因みに欧文フォントのみだと、スタイルシートのリンクが生成されます。
日本語や中国語、韓国語など東アジアのフォントでは「ダイナミックサブセット」が適用されるため、貼り付けるコードはCSSではなくJavaScriptになっています。
ダイナミックサブセットは、東アジアの Web フォントを提供することを目的として開発されました。この機能により、サイズの大きな東アジアのフォント（ほとんどの場合グリフ数 10,000 以上）を、読み込み時間に大きな影響を与えずに Web サイトで読み込むことが可能です。
Abobeヘルプ：ダイナミックサブセットと Web フォント提供
以前は日本語フォントをWebフォントとして利用すると、読み込みに時間がかかる、表示が遅いということがありました。
（表示されるまでシステムフォントが表示されてからWebフォントに切り替わる、不自然な表示・・・）
日本語は文字数が多いため、フォントデータ自体も膨大になり読み込みに時間がかかっていたのです。
ダイナミックサブセットはこの読み込み問題を解決する機能です。
実際にWebフォントを表示してみる
Webフォントをサイトに利用するためにはウェブサイトの<head></head>内にコードを貼り付けます。
WordPressの場合はテーマのfuncstions.phpやheader.phpを編集する必要があります。
利用しているテーマによってはWordPress管理画面から編集できる場合があります。
以下では無料WordPressテーマ「Cocoon」で独自Webフォントを使う方法を解説しています。
CocoonでWebフォントを使う
人気の無料WPテーマCocoonでWebフォントを使うには。
「トガリテ」は文字の端がトゲトゲになっているユニークなフォントです。こちらをWebフォントとして表示したいと思います。
step
1Adobe Fontsから埋め込みコードをコピー
step
2「Cocoon設定」で埋め込みコードをペースト
Cocoon設定＞アクセス解析・認証タブを選択、「その他のアクセス解析・認証コード設定」に埋め込みコードをペーストします。
step
3トガリテフォントにしたいところにスタイルを適用
子テーマのstyle.cssに記述します。
サイトタイトルに適用する場合
.site-name-text{
font-family: togalite, sans-serif;
font-weight: 600;
font-style: normal;
color:#FD7A7D !important;
}Webフォント適用前
Webフォント適用後
特定のページでのみWebフォントを使いたい場合は、各記事画面のカスタムJavascript、カスタムCSSへ記述すればOKです。
カスタムJavascriptにペーストするときは<script></script>タグは不要です。
Adobe Fontsのおすすめフォント
Adobe Fontsでおすすめの日本語、欧文フォントをピックアップしました。できるだけ、無料メンバーシップで利用可能なフォントを選んでいます。
白舟書体
無料メンバーシップで利用可能。行書、楷書、筆文字が揃っていて和風デザインや伝統的なイメージを演出できます。
https://fonts.adobe.com/foundries/hakusyu-fonts
源ノ角ゴシック
無料メンバーシップで利用可能。AdobeとGoogleが共同開発したオープンソースのフォントファミリー（英語: Source Han Sans）。
印刷、パソコンモニター、モバイル端末などの小さい領域でも可読性が高くなるようにデザインされているフォントです。
ウェイトが7種類と豊富。
こども丸ゴシック
無料メンバーシップ可。文字通り子供が書いたような丸く可愛い手描き感のあるフォント。
ほのかアンティーク丸
無料メンバーシップ可。レトロ感のある丸文字、オープンソースフォント。
Train One
無料メンバーシップ可。二重の線で作られたフォントワークスのフォント。
貂明朝テキスト
無料メンバーシップ可。貂明朝・てんみんちょうと読みます。動物の「貂」（てん）から来てるんですね。明朝体だけど可愛らしさのあるフォント。以前は有料メンバーシップのみの利用でしたが無料で公開されました。
カラー絵文字も可愛い。
有料メンバーシップで利用可能な日本語フォント
有料メンバーなら使えるフォントはもっと多く、有名フォントメーカーのフォントも利用可能になります。
Adobe Fontsで利用できるフォントメーカー
- モリサワ
- 視覚デザイン研究所
- スキルインフォメーションズ
- 砧書体制作所
- タイプバンク
- 昭和書体
- フォントワークス
- 大日本印刷
- タイプラボ
- FONT1000
- 味明
すべてのAdobe Fontsを無制限に使えるAdobe Creative Cloudを格安で購入する方法があります。
ここからは欧文フォントのおすすめです。
DIN 2014
直線的なラインが特徴。（有料メンバーシップのみ）
https://fonts.adobe.com/fonts/din-2014
Futura PT
（有料メンバーシップのみ）
https://fonts.adobe.com/fonts/futura-pt
Brandon Grotesque
（有料メンバーシップのみ）
https://fonts.adobe.com/fonts/brandon-grotesque
Abril
https://fonts.adobe.com/fonts/abril
Trajan Color
https://fonts.adobe.com/fonts/trajan-color
Oxygen
https://fonts.adobe.com/fonts/oxygen
Lobster
https://fonts.adobe.com/fonts/lobster
まとめ
商用利用、WebフォントもOKの無料でも使えるAdobe Fontの特徴と使い方、おすすめフォントを紹介しました。
Adobeというと有料会員でないと使えないんじゃないかと思いがちですが、無料会員（無料メンバーシップ）のままでも利用可能なサービスが結構あります。
その中でもAdobe Fontsは結構使える方ではないでしょうか、Adobe Expressとも連携可能で、アイキャッチ画像やSNS用サムネがさくっと作れるのもいいところですね。
しかし有料のAdobe CC会員ならならすべてのフォントが無制限で利用できるのでクリエイターとしては大きなポイントに無っります。既にAdobe CCを利用しているならAdobe Fontsを使わないともったいない！
これからAdobe CCを検討しているなら安く利用できる方法があります↓
フォントを探しているならこちらもおすすめ↓
-
-
Helvetica,Futura,DINなど有名フォントの代わりになる?おすすめGoogleフォント
前回に引き続きGoogleフォントについてです。 HelveticaやFutura、DINなどの有名フォントをWebフォントとして使いたい時、有料だったりするのでなかなか手が出しずらいですよね。 そん ...
続きを見る
