Blog & SNS / WordPress

Googleの日本語ウェブフォント「M PLUS Rounded 1c」に戻したよ

ブログのリニューアル当時はNoto Sans JPを使っていたのだけれど、結局、M PLUS Rounded 1cに戻すことにした。
大きなサイズで表示した場合に、こっちの方がしっくり来るんだよね。

フォントのウェイトをレギュラーに絞る

以前の試験運用と違って正式サポートされるようになってからの最大の違いは、ウェイトを選べるようになったこと。
だから、今回はレギュラーしか使用しない。
重たいwebフォントをわずかでも軽くしたいという気持ちもあるけど、もうひとつはデザイン的な問題だ。
現在使用中のElmastudioのブログテーマUkuには、レギュラーの太さ一種類だけの方がしっくり来る。

方法は簡単

1.ウェイトを選択する

Google Fonts 日本語Webフォント M PLUS Rounded 1c選択画面

2.CSS編集で追記

Google Fonts 日本語Webフォント M PLUS Rounded 1c選択画面 2

どちらの方法がベターなのかは、よく理解していないけれど、以前からずっとCSSに記載していく方法でやっている。
良さげな新しいフォントが出てきたときに変更が楽なはず。
さらに、CSSに記載したものをテキストとしてコピペ保存しておけば、なんかあったときに復旧しやすい。
ま、もう当分フォントを変更することはなさそうだけど、何せ浮気性の僕のことだから信用がおけない。
腰は軽くしておくに限る。

フォントを当てる範囲は、いつも手探りで、すんなり見つけられない。
要素や何やらを見ながら、このテーマであてる範囲をピックアップするとCSSは下記の通り。

@import url(‘https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c’);

body,
.single-post .entry-content p, .page .entry-content p, .page .entry-content, .entry-content ol, .entry-content ul, .blog.blog-classic .blog-wrap .entry-content ,
h1.site-title a,
p.site-title a,
.entry-summary,
.widget,
.title-footer,
.entry-header p.intro,
.entry-content,
.entry-content p,
.entry-content table,
.entry-content dl,
.entry-content ul,
.entry-content ol,
p.section-about-text,
p.text-big,
p.text-small,
#secondary h2.widget-title,
#sidebar-page h2.widget-title,
.entry-content blockquote p,
.entry-content p span.uppercase,
.section-about-column-two .social-nav ul li a,
.section-about-column-one p cite,
.widget_mc4wp_form_widget input[type=”email”],
.widget_mc4wp_form_widget input[type=”submit”],
.jetpack_subscription_widget #subscribe-email input[type=”email”],
.jetpack_subscription_widget #subscribe-submit input[type=”submit”],
.contact-form input[type=”submit”],
input,
textarea,
.site-content div.wpcf7 input,
.site-content div.wpcf7 textarea,
.site-content div.wpcf7 p,
a.standard-btn,
div.sharedaddy h3.sd-title,
.widget h2.widget-title,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.big-instagram-wrap .clear,
.single-product .entry-summary h1,
.uku-standard.blog-classic .more-link
{
font-family: ‘M PLUS Rounded 1c’, sans-serif;
}

このあたりはテーマで変わるんだろうし、そもそも僕は本質と基本を理解していないオトコ、正しいかどうかもわからない。
But it works!
これでOK!ってことにしておこう。
それに、このM PLUS Rounded 1cUkuの組みわせにはケッコー満足しているので、よほどのことがない限りは、いじることはなさそうなんだよね。
このまま、出来るだけ長く使えるといいな…

コメントを残す