Bloggerにgoogle fontsを導入しました。

こんにちは、ゆーるるです。

文字フォントを変えてみた話です。

現在QooQテーマを利用していますが、本文中の文字フォントがスマホで表示したときに、boldがかかっているように見えるのがなんとなく変で気になってましたところ、google fontsにかわいいフォントを見つけたので、早速導入してみました。

Google fontsの導入

いろいろ調べてみたところ、「M PLUS Rounded 1c」が可愛かったので、これを導入することにしました。

Google Fonts

導入方法は、以下のサイトを参考にさせていただきました。

Blogger ブログタイトルにGoogleフォントを適用

headタグにコードを挿入

headタグ内に挿入するコードを公式から取れるのですが、そのままではうまくBloggerに反映できなかったので、一部変更を加えています。

• 全ての末尾を/> に変更
• 2行目のコードのcrossorigin を、link='crossorigin' に変更

最終的なコードが以下です。

<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link href='https://fonts.gstatic.com' link='crossorigin' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;700' rel='stylesheet'/>

2行目のコードは、google fontsの読み込みを高速化してくれるものらしいです。

ローカルファイルからでは読み込みができなかったので、Blogger上のHTML編集で追加してみたところ、「link=でラッピングしてね」的なメッセージが出てきたので、やってみたら保存できました。

挿入場所については、headタグ内ならどこでも良さそうですが、

<b:include data='blog' name='all-head-content'/>

の後に挿入している人がいて、なんとなくブログコンテンツ読み込んでからだとページスピードに良い影響があるのかな？と思ったので、私も同じようにしています。

CSSのfont-familyに追加

私は全フォントに反映させたかったので、bodyタグの中に入れました。'M PLUS Rounded 1c' がgoogle fontsです。それ以降のフォントは、QooQテーマのデフォルトをそのまま残しています。

  body{
    font-family: 'M PLUS Rounded 1c', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;    
    background: $(other.topback);
    color: $(font.color);
}

これでスマホも丸っこいかわいいフォントにできたので、大満足です！