【 更新 】おすすめ記事はこちら

【CSS】Adobe Fontsのモリサワフォントをfont-familyで指定する

Webフォントといえば「モリサワフォント」が有名ですよね。

例えば、明朝体の「リュウミン」は名刺でよく使われるフォントです。

リュウミンのページ

実は、そんな「モリサワフォント」が「Adobeユーザー」なら無料で使用できます。

書体は、全13種類。どれも使いやすい定番のフォントです。

使い方は、

  1. Adobe Fonts」で、任意の「モリサワフォント」をアクティベート
  2. 「プロジェクト」に登録して、コードを発行する
  3. 「HTMLコード」「CSSプロパティ」を指定の場所に貼り付ける

この3ステップで完了です。

使いたいフォントがない場合は、以下公式の「モリサワストア」のプランを検討しましょう。

  1. 「MORISAWA PASSPORT」>54,780円(税込)※年間契約のみ
  2. 「OpenType」>49,500円(税込)
  3. 「Select Pack」>22,000円(税込)
  4. 「TypeBank Select Pack」>16,500円(税込)

扱っている書体の数は、①で1,500種類以上、②で7種類、③と④で1種類となります。

フォントにこだわりがある!

本格的にデザインに取り組みたい!

ということでなければ「Adobe Fonts」の「モリサワフォント」で十分対応できますよ!

はじめに

2021年9月10日以降、「Adobe Fonts」では「モリサワフォント」の提供を、一部終了しています。

現在使用できるフォントは以下13種類です。

  1. ゴシックMB101
  2. A-OTF じゅん Pro
  3. A-OTF リュウミン Pr6N
  4. A-OTF UD黎ミン Pr6N
  5. A-OTF UD新ゴコンデ80 Pr6N
  6. A-OTF UD新ゴ Pr6N
  7. A-OTF UD新丸ゴ Pr6N
  8. TBUDゴシック Std
  9. TBUD明朝 Std
  10. TBUD丸ゴシック Std
  11. UDデジタル教科書体
  12. 游ゴシック体
  13. 游明朝体 Pr6N

モリサワフォントを検索

Adobe Fonts」の検索ボックスで「モリサワ」と入力。Enterキーを押します。

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

検索結果からモリサワを選択

フォントを選択

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

一覧からリュウミンを選択

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

リュウミンのページ

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

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

右下のアクティベートをクリック。

リュウミンをアクティベート

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

アクティベート完了です。

フォントのアクティベーションが完了

Webプロジェクトに追加

Webサイトで使うために必要なコードを発行していきます。

左下のアイコンをクリック。

コードアイコンをクリック

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

ここでは「Sample」と入力。

新規プロジェクトを作成

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

作成をクリック

埋め込みコードをコピー

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

ヘッドタグ用の埋め込みコード

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

プロパティと値

埋め込みコードを再確認(任意)

コードの確認前にダイアログを閉じたなど、再度確認したいときは以下方法をお試しください。

右上の「フォントを管理」をクリック。

フォントを管理をクリック

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

Webプロジェクトタグを開く

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

登録したプロジェクト一覧

プロジェクトに含まれている「フォント」の編集もこちらからできます。

おわりに

「モリサワフォント」を無料で使えるのは、かなり助かりますね。

「Adobeユーザー」なら、ぜひ使いたいツールです。

今回は「モリサワフォント」をメインにご紹介しましたが、他のフォントも同じ手順で反映できます。

もし違いがあるとすれば、コードのタグ部分。

「A-OTF リュウミン Pr6N」は、<script>タグで囲まれていましたが、<link>タグが使われているものもあります。

基本的にはコピー&ペーストなので、間違えることは少ないと思いますが、例外もあるんだなーくらいに覚えておけばOK。

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