ブログでGoogle Fontsの日本語フォントを使う

Google FontsはWeb Fontの1種で、Web上にあるフォントをブラウザで表示できる。

日本語フォントは少ないけど、英字対応のフォントなら沢山用意されている↓↓↓

Google Fonts

私もつい最近、Google Fontsの日本語フォントを利用し始めた。

まあフォントは触らずとも、問題なくブログは運営出来るので、正直ここまで凝る必要ある!?と聞かれたら無いかも…

ただデフォルトではダサい、フォントを変えるとブログの印象も随分変わるので、フォントにも拘りたい人向けに、WordPressでGoogle Fonts導入の手順をご紹介。

スポンサーリンク

Google Fontsの日本語フォントについて

以下のサイトが日本語フォントをpick upしてくれてる↓↓↓

Google Fonts + 日本語 早期アクセス

上のサイトでは、HTMLとCSSに追記すべきコードが書かれている。

気に入ったフォントデザインがあれば、WordPressにコピペするだけでOK!!

現時点で完全にはサポートしていないフォントを試験的に提供してるみたいだけど…

今のところ使ってて、特に問題は無さげだ。

header&styleに追記するだけで利用可能

WordPressの子テーマを使っている前提で、今回はsimplicity2で解説↓↓↓

まず子テーマのheader-insert.phpにlinkを追記↓↓↓

上記リンク先で紹介されているRounded M+ 1cのフォントを採用。

9行目に書くとログインユーザー時に適用されないので、13行目(elseifより後ろ)に追記する。

次に子テーマのstyle.cssに追記↓↓↓

上の例だとブログ中の全ての要素に対して、Google Fontsを適用させてるけど、部分的に使いたければ、*ではなく属性(idとかclassとか)を指定すれば利用可能。

もしブログのフォントが変わらなければ、キャッシュ系プラグインのキャッシュをクリア、更に閲覧ブラウザのキャッシュも消せば、多分表示されてくれる。

ちなみにGoogle Fontsは重いと言われてるけど、2~3つくらいなら問題ないそうだ。あまり沢山利用してると重くなるかもなので、そこらへんは注意が必要。

スポンサーリンク