Blog & SNS / WordPress
wordpress icon

Googleの日本語ウェブフォント「Rounded M + 1c」をTwenty Fifteen に設置

Googleが公開している日本語のデザイナーウェブフォント「Rounded M + 1c」は、もう僕には定番となっている。
だから言うまでもなく、今回使用するWordPressのTwenty Fifteenにも設置した。
エックスサーバーのwpXレンタルサーバーに移転したおかげなのか、もうウェブフォント特有の咳き込むような遅延もほとんど気にすることがない。

Rounded M + 1c

このフォントに出会うまで、最終形が決まらないというか、腰が落ち着かないというか、あれこれググっちゃ試行錯誤の繰り返しだった。
しかし現在は、概ねうまくいっている。
このアンプラグドなブログには、ぴったりなデザインだと思う。
おかげでフォントをめぐる冒険からは解放されることができたのだ。

Googleの日本語ウェブフォント「Rounded M + 1c」をWordPressに設置

これひとつ設定しておけば、どんな環境でも同じように表示されるウェブフォントのメリットは言うまでもないだろう。
このフォントのお世話になる前に、普段滅多に触れることのないWindowsマシンから、このブログを初めて見たときは、大きく変わった印象の違いに軽いショックを受けたもんなぁ…
さらに、このフォントは、Googleが無料で公開してくれている点でも、もろもろ安心だ。

追加CSSに記載するだけ

外観>カスタマイズ>追加CSSに記載

@import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,button,
input,
select,
textarea,.comments-title,
.comment-reply-title,.page-title {
font-family: ‘Rounded Mplus 1c’, sans-serif;
}

さらにTwenty Fifteenでは、引用部分がアンバランスに大きく表示される感覚があったので、その表示サイズも調整してみた。

body,blockquote,h3{
font-size: 2.0rem;
}

フォントは大切

フォント選びは、本当に大切だと思う。
特に日本語を扱う者、シンプルなブログテーマを使用する者には。

僕の目指しているブログのレイアウトは、リーダー表示に頼らなくとも読みやすいこと。

必然的にシンプルなブログテーマを使用するし、そうなるとフォントの担う責任も大きくなる。
だから、ブログのカスタマイズというかチューニングのポイントは、しっくりくるフォントを見つけられるかどうかにかかってる。
逆に言えば、それさえ見つかれば、あとは芝を刈るように見栄えを整えるだけだから、ほとんど労力はかからない。
「Rounded M + 1c」というお気にりのウェブフォントと、Twenty Fifteenというお気にりのテーマの二本柱が安定していた今回は、ストレスなく作業することができた。

フォントをめぐる困難な冒険のまっただ中のみなさま、お試しあれ。

オマケは、我らがスカーペッタが語るフォントの重要性をどうぞ。

https://alog4.tumblr.com/post/165620678643/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AF%E4%BA%8C%E5%8D%81%E4%B8%80%E4%B8%96%E7%B4%80%E3%81%AE%E6%96%87%E6%9B%B8%E9%91%91%E5%AE%9A%E3%81%AE%E5%A4%A7%E4%BA%8B%E3%81%AA%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%80%E3%81%A4

コメントを残す