WEB Tips ウェブ・アプリ

商用利用,WebフォントOK 無料でも使えるAdobe Fontsの使い方

本ページにはプロモーションが含まれています

商用利用,WebフォントOK 無料でも使えるAdobe Fontsの使い方

Adobe Fontsは、無料登録だけで利用できてWebフォントも利用できるサービスです。Adobe Fontsの使い方と無料でも使えるおすすめフォントを紹介します。

Adobeというとプロが使う高価なソフト、というイメージがありますね。

確かにAdobeのサブスクリプション(有料プラン)を利用していればAdobe Fontsは使い放題なのですが、無料会員のままでも利用できるのです。 >> Adobe Creative Cloud プランの比較

使い方もフォントをダウンロードしたりインストールする必要がなく、簡単に利用できます。

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 Creative Cloud プランの比較

ライセンスもかなり自由度があります。

Adobe Fontsで許可されていること

  • すべてのフォントで個人利用、商用利用の両方OK
  • ロゴ制作や画像制作、クライアントへ提供する印刷物に利用可能
  • Adobe Fontsで制作したロゴを著作権で保護したり、商標登録することができる
  • Adobe Fontsを使ってTシャツのデザイン、商品パッケージなど商品に使用できる
  • 書籍や雑誌など市販目的の商品に利用できる
  • Webフォントとして利用可能
  • PDFにフォントを埋め込んで表示、印刷が可能
  • 商用の動画コンテンツでフォントを利用可能

Adobe Fontsで許可されていないこと

  • フォント1文字からなる製品(ステンシル、ステッカー、ジュエリーなど)を作ること
  • 自分が販売したデザインをクライアントがカスタマイズすること
  • クライアントのWebサイトで自分のライセンスでWebフォントを利用すること

Adobe Fontsの使い方

Adobe Fontsを使うにはまずAdobe IDを取得します(無料)。

Adobe 公式サイトのログインからアカウント作成をします。

ログイン画面が開いたら、アカウント作成をクリックして情報を入力します。

無料会員のままAdobe Fontsを利用する

AdobeIDの登録が完了したら、Adobe Fontsのページにアクセスして利用したいフォントをアクティベートするだけです。

無料で使えるフォントだけ見たい場合は

「すべてのフォント」を選んで左上にある「Creative Cloudで利用可能なフォントを表示」のチェックを外します。

無料のまま利用できるフォントだけが表示されます。2022年9月時点で339個のフォントファミリー、日本語だと97個フォントファミリーがありました。(フォントファミリーで表示されているので総数はわかりませんが)

日本語で絞り込むと97個フォントファミリー

ハートアイコンをクリックするとお気に入りに登録できます。

フォントをアクティベートする

使いたいフォントが見つかったら、右上にある「フォントをアクティベート」のトグルボタンをスライドさせてONにするだけです。

フォントの管理や複数PCで使いたい場合はCreative Cloudアプリをインストールしておくと良いでしょう

Adobe CCアプリを利用していればCreative Cloudデスクトップはアプリケーションをインストールした時に一緒にインストールされています。

Adobe以外のアプリケーションで使う場合もフォントを選択するだけ

PowerPointで使いたいなら、パワポを開いて文書を作成したら、フォントメニューからフォントを選択するだけでOKです。

パワポ編集画面

IllustratorのCS2でもいけました。

Adobe Fontsが反映されない、同期されないときはこちらが参考です↓

Adobe Fonts 反映されない、同期されないトラブルの対処法

IllustratorやPhotoshopでフォントを追加したいときにアクティベートができない、アクティベートしたのにフォント一覧に反映されない、フォントが同期されないなど、Adobe Fontsのよ ...

続きを見る

Adobe CC有料会員ならアプリから利用可能

Adobe CCコンプリートプランやIllustratorPhotoshopのサブスクリプション利用しているなら、アプリからも利用できます。

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
1
Adobe 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

無料メンバーシップ可。二重の線で作られたフォントワークスのフォント。

Train One

貂明朝テキスト

無料メンバーシップ可。貂明朝・てんみんちょうと読みます。動物の「貂」(てん)から来てるんですね。明朝体だけど可愛らしさのあるフォント。以前は有料メンバーシップのみの利用でしたが無料で公開されました。

カラー絵文字も可愛いです。

貂明朝テキスト

有料メンバーシップで利用可能な日本語フォント

有料メンバーなら使えるフォントはもっと多く、有名フォントメーカーのフォントも利用可能になります。

出典:Adobe Blog https://blog.adobe.com/jp/publish/2022/04/10/cc-design-adobefonts

Adobe Fontsで利用できるフォントメーカー

  • モリサワ
  • 視覚デザイン研究所
  • スキルインフォメーションズ
  • 砧書体制作所
  • タイプバンク
  • 昭和書体
  • フォントワークス
  • 大日本印刷
  • タイプラボ
  • FONT1000
  • 味明

すべてのAdobe Fontsを無制限に使えるAdobe Creative Cloudを格安で購入する方法があります。

ここからは欧文フォントのおすすめです。有料メンバーも含みます。

DIN 2014

直線的なラインが特徴。(有料メンバーシップのみ)
DIN2014

Futura PT

人気フォントであるFuturaもあります(有料メンバーシップのみ)
Futura PT

Brandon Grotesque

太いゴシック体がロゴタイプ向きです。(有料メンバーシップのみ)
Brandon Grotesque

Abril

ポスターや見出しに最適
Abril

Trajan Color

古代ローマのトラヤヌス皇帝の記念碑に使われている文字をもとに作られたフォント、カラー書体です。
Trajan Color

Oxygen

可読性の高いゴシック体
Oxygen

Lobster

HardRock Cafeを思い起こします。
Lobster

まとめ

商用利用、WebフォントもOKの無料でも使えるAdobe Fontの特徴と使い方、おすすめフォントを紹介しました。

Adobeというと有料でないと使えないんじゃないかと思いがちですが、無料会員(無料メンバーシップ)のままでも利用可能なサービスが結構あります。

その中でもAdobe Fontsはかなり使えるんじゃないでしょうか、Adobe Expressとも連携可能で、アイキャッチ画像やSNS用サムネがさくっと作れるのもいいところですね。

さらに有料のAdobe CC会員なら、すべてのフォントが無制限で利用できるのでクリエイターとしては大きなポイントになります。既にAdobe CCを利用しているならAdobe Fontsを使わないともったいない!

Adobe Fontsを確認する

これからAdobe CCを検討しているなら安く利用できる方法があります↓

フォントを探しているならこちらもおすすめ↓

Helvetica,Futura,DINなど有名フォントの代わりになる?おすすめGoogleフォント

前回に引き続きGoogleフォントについてです。 HelveticaやFutura、DINなどの有名フォントをWebフォントとして使いたい時、有料だったりするのでなかなか手が出しずらいですよね。 そん ...

続きを見る

今月キャンペーン特典があるサービス

  • エックスサーバー
    半額キャッシュバックで月額費用が実質693円&ドメイン永久無料 - 2023年10月2日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF - 2023年10月3日(火)16:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, ウェブ・アプリ
-,