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

create 2021/08/12

Blogger フォント

t f B! P L

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

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

現在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 Pゴシック", "MS PGothic", sans-serif;    
    background: $(other.topback);
    color: $(font.color);
}

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

このブログを検索

自己紹介

自分の写真
Pythonが趣味です。 勉強のアウトプットを公開したくて、新たにブログ開設しました。 勉強メモのつもりだけど、日常の雑記も書きたい予定。

独学中の身で、個人的な勉強メモも投稿しているので、間違った内容が含まれることもあるかもしれません。
お気づきの際は、問い合わせフォームや、コメント欄からご指摘いただけましたら、大変助かります。

旧ブログ(更新停止中。いずれ統合するかも)ゆーるるのゆるゆる日記

参加中ランキング

PVアクセスランキング にほんブログ村

ブログ アーカイブ

QooQ