Twitterでブログ更新情報を配信中

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

Webフォントといえばモリサワフォントが定番ですよね。例えば、明朝体の「リュウミン」は名刺でよく使われています。MORISAWA PASSPORTを契約する方法もありますが、年間契約49,800円なので、ひと月あたり4,000円と少し高級感のあるイメージです。

実は、Adobeユーザーなら無料で使うことができるんですよ。サイトを作るときに使いたいのは英語よりも日本語なので、Google Fontsよりも実用的です。

Adobe Fontsの検索画面

デザイナーとして仕事をするなら押さえたい、定番のモリサワフォントをfont-familyで指定する方法をご紹介していきます。

Adobe Fontsでフォントを選ぶ

Adobe Fontsのトップからフォント一覧を選びます。

フォント一覧

デフォルトモードを「日本語モード」にします。

日本語モードに切り替え

こちらは任意ですが「A-OTF リュウミン Pr6N」を一例として選びます。

フォントファミリーを表示

Webプロジェクトに追加

「Webプロジェクトに追加」をクリックします。

Webプロジェクトに追加

作成または…の枠内に分かりやすくプロジェクトの名前を入れます。

新規プロジェクトを作成

発行されたコードをコピー&ペースト

コードが発行されるので、説明の通り<head>タグ内にコピーしてください。

HTMLコードが発行される

CSSファイルには同じダイアログ下部にある指定方法で記述しましょう。

追加されたフォントのスタイル

無料でモリサワフォントを使えるのは嬉しいですね。Adobe Fontsなら日本語も充実していますし、<head>タグに読み込むコードもCSSのスタイルも発行されるので、コーディング初心者にやさしい作りになっています。

今回の「A-OTF リュウミン Pr6N」では<script>タグで囲まれていましたが、他のフォントでは<link rel=””>のコードなどもあります。フォントごとに異なるのでいくつか試して慣れていきましょう。