《Cocoonでの使い方も解説!》無料でモリサワのWebフォントを使う方法

無料でモリサワのWebフォントを使う方法WEB

デザイン性に優れたモリサワフォントという有名なフォントがあります。このWebフォント版を、無料で使用する方法をご紹介します。

無料版でできること

月契約:¥0

基本PV:1万 PV / 月

利用可能書体数:1

利用可能ドメイン数:1

●スタンダード無料プランは、毎月 1万 PV までフォントが配信され、

超過した場合は翌月までフォントは配信されません。

https://typesquare.com/ja/service/plan

使えるのは1書体なので、タイトルなどアクセントとして使うのも良さそうです。また、 1万PVを超えてもフォントが配信されないだけで、CSSなどで指定した次の優先順位のフォントが適用されるはずなので、何も表示されなくなることはないと思います。

使い方

① モリサワが運営するtypesquareにアクセスし、〔新規登録〕を選択

② 〔ご利用申し込み〕を選択

③ 同意した上で、〔次へ〕を選択

④ 必要事項を入力し、〔次へ〕を選択

⑤ 入力内容を確認し、〔次へ〕を選択

⑥ メールが届くのを待ちます

⑦ メールが来たら、メールに記載のリンクをクリックし、〔ログインはこちら〕を選択

⑧ 登録時に入力したメールアドレス、パスワードを入力し、〔ログイン〕を選択

⑨ 〔無料プラン・無料プラン〕を選択

⑩ (B)、(C)を入力し、〔変更内容を確認〕を選択

(A)・・・ これをご自身のWebサイトの<head>~</head>の間に貼り付けます

(B)・・・好きな書体を一つ選択します。ここで選択したフォントをCSSのfont-familyに設定します。

(C)・・・ご自身のWebサイトのURLを入力します。

※ ご自身のWebサイトにフォントを適用する際に、(A)と(B)が必要になります。

⑪ 内容を確認し、〔保存実行〕を選択

⑫ これで登録完了です

⑬ ご自身のWebサイトに⑩の(A)(B)の対応をすればフォントが適用されます

WordPressテーマ「Cocoon」の場合

<head>~</head>への記述

wp-content/themes/cocoon-child-master/tmp-user/head-insert.php

に記述した内容が、<head>~</head>の中に出力されます。

そのため、先ほどの⑩の(A)をhead-insert.phpの最終行に貼り付けます。

<?php
//フッター部分に解析タグを挿入したいときはこのテンプレートに挿入
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
?>
<?php if (!is_user_administrator()) :
//管理者以外カウントしたくない場合は
//↓ここに挿入?>

<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
<script type="text/javascript" src="//typesquare.com/0/tsst/script/ja/typesquare.js?xxxxxxxxxxxxxxxxxxxxxxxxxxxx" charset="utf-8"></script>

font-familyの追加

wp-content/themes/cocoon-child-master/style.css

の適用したいタグやクラスなどに、font-familyを追加します。

以下の例の場合の記述です。任意の内容に置き換えてご覧ください。

  • フォントを適用させるクラスは morisawa_font というクラス
  • モリサワフォントは「新ゴ R」で、次の優先順位に「xxx」、「yyy」というフォントを指定
.morisawa_font{
  font-family: '新ゴ R','xxx','yyy';
}

これでモリサワフォントが反映するはずです。反映されない場合は、CSSの優先順位が低い可能性がありますので、!important をつけるなどで優先順位を上げれば解決する場合があります。

まとめ

モリサワフォントは高額で手が出しにくいイメージがありますが、無料なので気軽に使えます。

月1万PVを超えてもフォントが配信されないだけなので、気が付いたら課金されていたということもないので安心です。

もちろん有償プランもありますので、使用したいフォント数やアクセス数に応じた利用をされるとよいと思います。

フォントが変わるだけでサイトのクオリティが大きく変わりますので、興味のある方は気軽にお試しください。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMO WEB
COLOR CODE