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

WEB Tips

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 CC有料会員ならアプリから利用可能

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

Illustratorでは直接アクティベートすることができます。

Photoshopでは直接アクティベートはできませんが、Adobe Fontsへリンクがあります。

Webフォントの利用方法

Webフォントとして使いたい場合もコードをコピペするだけ、簡単です。

使いたいフォントの<code></></code>のアイコンをクリックします。

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フォントとして表示したいと思います。

ロゴなど、サイト全体でWebフォント利用したい場合
  • Step1
    Adobe Fontsから埋め込みコードをコピー
  • Step2
    「Cocoon設定」で埋め込みコードをペースト

    Cocoon設定>アクセス解析・認証タブを選択、「その他のアクセス解析・認証コード設定」に埋め込みコードをペーストします。

  • ラベル
    トガリテフォントにしたいところにスタイルを適用

    子テーマの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でおすすめの日本語、欧文フォントをピックアップしました。できるだけ、無料メンバーシップで利用可能なフォントを選んでいます。

白舟書体

無料メンバーシップで利用可能。行書、楷書、筆文字が揃っていて和風デザインや伝統的なイメージを演出できます。

Artboard 1
Hakusyu Fonts started business as a seal shop. We offer brush-script typefaces in the traditional regular (kaisho) calligraphic style and the “Design Brush-scri

源ノ角ゴシック

無料メンバーシップで利用可能。AdobeとGoogleが共同開発したオープンソースのフォントファミリー(英語: Source Han Sans)。

印刷、パソコンモニター、モバイル端末などの小さい領域でも可読性が高くなるようにデザインされているフォントです。

ウェイトが7種類と豊富。

こども丸ゴシック

無料メンバーシップ可。文字通り子供が書いたような丸く可愛い手描き感のあるフォント。

ほのかアンティーク丸

無料メンバーシップ可。レトロ感のある丸文字、オープンソースフォント。

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

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

DIN 2014 | Adobe Fonts
Explore DIN 2014 designed by Vasily Biryukov at Adobe Fonts.

Futura PT

(有料メンバーシップのみ)

Futura PT | Adobe Fonts
Explore Futura PT designed by Isabella Chaeva, Paul Renner, Vladimir Andrich, Vladimir Yefimov at Adobe Fonts.

Brandon Grotesque

(有料メンバーシップのみ)

Brandon Grotesque | Adobe Fonts
Explore Brandon Grotesque designed by Hannes von Döhren at Adobe Fonts.

Abril

Abril | Adobe Fonts
Explore Abril designed by José Scaglione, Veronika Burian at Adobe Fonts.

Trajan Color

Trajan Color | Adobe Fonts
Explore Trajan Color designed by Carol Twombly, Robert Slimbach, Sérgio Martins at Adobe Fonts.

Oxygen

Oxygen | Adobe Fonts
Explore Oxygen designed by Vernon Adams at Adobe Fonts.

Lobster

Lobster | Adobe Fonts
Explore Lobster designed by Pablo Impallari at Adobe Fonts.

まとめ

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

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

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

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

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

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

タイトルとURLをコピーしました