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。
通信状態によっては、フォントが適用されないままページが構築されてしまうので、ローカルで作るときなどはご注意ください。
