Google Fonts+日本語「Rounded M+ 1c」がにじむので「Kosugi Maru」にフォント変更

  • URLをコピーしました!

2019年6月28日のアップデート「Cocoon 1.8.6」から、
Cocoon設定で「Kosugi Maru」のフォントが選択できるようになりました。
そのため、以下のカスタマイズを私は現在使用していません。

Webフォント、 Google Fonts+日本語の「Rounded M+ 1c」は、めっちゃ好きなフォントです。

Webフォントを利用するとページ速度は落ちてしまう可能性が高いので、
デメリットはありますが、丸っこくて可愛いところがお気に入りでした♪

それが、ある日突然16px以下のフォントサイズだとにじむようになりまして…
(Windows環境だけじゃないかと思われます。)

CSSで調整して細かいところのにじみには、目をつぶってました。(T▽T)アハハ!
(その話が↓コレ)

もう、このまま目をつぶったままでいこう…そう思っていたところ…
似たような別のフォントがあることに気付きました。

目次

「Rounded M+ 1c」の代替えフォントは、「Kosugi Maru」

Google Fontsって2つサイトあったんですね…。(知らなかった・・・汗)

↓これまで見てたサイト

↓ここにもあった。

その中から…
「Rounded M+ 1c」に近いフォントが、「Kosugi Maru」でした。

これだと、16px以下でもにじみません。

フォンサイズが大きいと丸みが際立ち、16px以下だとどうしても丸みは抑えた感じには見えますけど
丸っぽい…にじまない…のでもうこれで全然OKかな~と。

テーマ「Cocoon」でのフォント指定

「Cocoon」は、Webフォントも含め、指定できるフォントがいくつか用意されています。

それをどうやって、「Kosugi Maru」へフォントを変更するか…。
Cocoon公式のフォーラムに要望を入れてみようかな…とも考えました。
ただ、これ勇気がなくてできなかった。(T-T) 

だとしたら、自分でどうにかするしかない…

ってことで…やってみました。以下、その方法です。

「Cocoon」でWebフォントを指定する方法

設定箇所は、2点です。

  • Webフォントのスタイルシートと自ブログをリンクさせる
  • スタイルシートでフォント指定する

Webフォントのスタイルシートと自ブログをリンクさせる

Webフォントのスタイルシートを自分のサイトにリンクさせるコード(HTML)を記述します。
ヘッダーに記述する方法、スタイルシートに記述する方法(@importを記述)、と2つあります。

ワタシの場合「@importを記述」ではできなかったので、ヘッダーにリンクを入れてます。

上記より「Kosugi Maru」のコードをコピーします。

 <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru" rel="stylesheet"> 


WordPress管理画面「外観」→「CSS編集」を開きます。
Cocoonを利用している場合、ほぼ子テーマの編集画面になるはずです。

Cocoon子テーマの「tmp-usr」をクリックします。

「head-insert.php」を開く

「<link」から始まる先のコードを貼り付けます。

スタイルシートでフォント指定する

子テーマの編集画面のまま、「スタイルシート(style.css)」をクリックし、画面を開きます。

「スタイルシート(style.css)」を開く

ファイル内に「必要ならばここにコードを書く」の文言がありますので、
それ以降にフォントを指定するCSSを記述します。

.container{
font-family: 'Kosugi Maru', sans-serif;
} 

「.container」で指定してますが、実はもっとスマートな記述方法はあると思います。

タイトルだけとか…本文だけだとか…
個別でそれぞれ指定した方がよいのかと思ったのですが、
あれこれ試したところ全体的なフォントを全部変えるには、ココでOKだったのでとりあえず入れてます。(-。-;)

他にいい指定箇所があれば、ぜひ、教えていただきたいです。

AMPページでも同じフォント指定をする場合

(同じく子テーマのCSS編集画面から)
記述する内容は一緒で、別ファイルに記述します。

「amp-header-insert.php」を開く

<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru" rel="stylesheet">

「amp.css」を開く

.container{
font-family: 'Kosugi Maru', sans-serif;
}

まとめ

以上、「Google Fonts+日本語「Rounded M+ 1c」がにじむので「Kosugi Maru」にフォント変更」した話でした。
Google Fonts+日本語「Rounded M+ 1c」は好きなフォントだけど、16px以下でフォントサイズを指定するとにじんで見えるから、利用しづらい…とお悩みの方…

「Kosugi Maru」なら…

  • 「Rounded M+ 1c」に近い丸めのフォント
  • 16px以下でもにじまない

と、上記の点から「Rounded M+ 1c」に並ぶフォントだと思いますので、
ぜひ利用を検討してみてくださいね♪

それでは、また!けろら~でした♪\(^▽^)/

よかったらシェアしてね!
  • URLをコピーしました!
目次