Webフォントといえば「モリサワフォント」が有名ですよね。
例えば、明朝体の「リュウミン」は名刺でよく使われるフォントです。

実は、そんな「モリサワフォント」が「Adobeユーザー」なら無料で使用できます。
書体は、全13種類。どれも使いやすい定番のフォントです。
使い方は、
- 「Adobe Fonts」で、任意の「モリサワフォント」をアクティベート
- 「プロジェクト」に登録して、コードを発行する
- 「HTMLコード」「CSSプロパティ」を指定の場所に貼り付ける
この3ステップで完了です。
使いたいフォントがない場合は、以下公式の「モリサワストア」のプランを検討しましょう。
- 「MORISAWA PASSPORT」>54,780円(税込)※年間契約のみ
- 「OpenType」>49,500円(税込)
- 「Select Pack」>22,000円(税込)
- 「TypeBank Select Pack」>16,500円(税込)
扱っている書体の数は、①で1,500種類以上、②で7種類、③と④で1種類となります。
フォントにこだわりがある!
本格的にデザインに取り組みたい!
ということでなければ「Adobe Fonts」の「モリサワフォント」で十分対応できますよ!
はじめに
2021年9月10日以降、「Adobe Fonts」では「モリサワフォント」の提供を、一部終了しています。
現在使用できるフォントは以下13種類です。
- ゴシックMB101
- A-OTF じゅん Pro
- A-OTF リュウミン Pr6N
- A-OTF UD黎ミン Pr6N
- A-OTF UD新ゴコンデ80 Pr6N
- A-OTF UD新ゴ Pr6N
- A-OTF UD新丸ゴ Pr6N
- TBUDゴシック Std
- TBUD明朝 Std
- TBUD丸ゴシック Std
- UDデジタル教科書体
- 游ゴシック体
- 游明朝体 Pr6N
モリサワフォントを検索
「Adobe Fonts」の検索ボックスで「モリサワ」と入力。Enterキーを押します。

検索結果から「モリサワ」をクリック。

フォントを選択
任意のフォントを選びます。ここでは「A-OTF リュウミン Pr6N」をクリック。

フォントのページが開きます。

フォントをアクティベート
ページをスクロールすると、アクティベートできるフォントが表示されています。
右下のアクティベートをクリック。

ページにフォントが複数表示されることもあります。その場合は、画面右上にある「〇個のフォントをアクティベート」を使うことで、一度に適用できます。
アクティベート完了です。

Webプロジェクトに追加
Webサイトで使うために必要なコードを発行していきます。
左下のアイコンをクリック。

「新規プロジェクトを作成」を選んで、枠内に任意のプロジェクト名を入れます。
ここでは「Sample」と入力。

「作成」をクリックして完了です。

埋め込みコードをコピー
ダイアログに表示されたコードを<head>タグ内にコピーしてください。

CSSファイルには、同じダイアログの下にあるプロパティをコピーします。

埋め込みコードを再確認(任意)
コードの確認前にダイアログを閉じたなど、再度確認したいときは以下方法をお試しください。
右上の「フォントを管理」をクリック。

「Webプロジェクト」のタブを開きます。

今回登録した「Sample」プロジェクトなどが一覧で表示されます。「プロジェクトを埋め込み」にあるコードを確認。

プロジェクトに含まれている「フォント」の編集もこちらからできます。
おわりに
「モリサワフォント」を無料で使えるのは、かなり助かりますね。
「Adobeユーザー」なら、ぜひ使いたいツールです。
今回は「モリサワフォント」をメインにご紹介しましたが、他のフォントも同じ手順で反映できます。
もし違いがあるとすれば、コードのタグ部分。
「A-OTF リュウミン Pr6N」は、<script>
タグで囲まれていましたが、<link>
タグが使われているものもあります。
基本的にはコピー&ペーストなので、間違えることは少ないと思いますが、例外もあるんだなーくらいに覚えておけばOK。
通信状態によっては、フォントが適用されないままページが構築されてしまうので、ローカルで作るときなどはご注意ください。