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」に並ぶフォントだと思いますので、
ぜひ利用を検討してみてくださいね♪
それでは、また！けろら～でした♪＼(^▽^)／