どこまでも歩く

はてなブログでGoogle Fonts を使ってみた

どうも、平熱系男子にしです。

 

フォントをGoogleの爆速サーバーから読み込めば多少は表示速度が上がるんじゃないか?

 

てことで、今日はこのブログのフォントをGoogle Fonts に変更してみました。

 

今までと違う感じになりましたでしょ? 

 

因みに、変更前の当ブログの表示速度はたった20でした!!

f:id:nishi0001:20190405215532p:plain

平均が50~80なのでかなり遅いですね。。。

 

表示速度は検索順位にも影響するので早く手を打たなければ・・・

 

 

 

まずはこちらのGoogle Fontsにアクセスします。

https://fonts.google.com/?subset=japanese

 

f:id:nishi0001:20190405213451g:plain

Japaneseを選択すると日本語フォントがずら~と表示されます。選ぶの迷いますね(笑)

 

とりあえず、ぱっと見して左上のNoto Sans JPが良かったので、それに決定しました。

 

+マークをクリックすると次の画面に進みます。

 

f:id:nishi0001:20190405214407g:plain

HTMLとCSSに記述するコードが表示されました。

 

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

このコードは<head>~</head>部分へ

 

  1. font-family: 'Noto Sans JP', sans-serif;

これはデザインCSSの変更したい部分へ張ります。例えば、サイト全体を変えたいならbodyの後とか。

 

もっと詳しく知りたい場合は、他の方が詳しく説明されているのでググってみてください。

 

saruwakakun.com

こちらのサイトはかなり丁寧に解説されていて参考になります。

 

 

てことで、Google Fonts に変更したのでPageSpeed Insightで再び表示速度を測ってみます。

f:id:nishi0001:20190405215551g:plain

モバイルで27かぁ。多少は上がったけど、まだまだ遅いですね。。。パソコンだと速いんだけどなぁ。。。

 

とりあえず、今日は疲れたのでここまでにします。それではまた!