「Google Fonts正式版」をはてなブログに入れてみた

「Google Fonts正式版に日本語がやってきた！」ということで自分のはてなブログに導入しました。簡単に導入はできますがサイトによっては向いていない可能性があります。誰かの参考になれば幸いです。

f:id:masalib:20180904013628j:plain

目次（クリックすると展開されます）

Google Fontsとは
困った事
導入手順
- fontをヘッダーで読み込ませる
- CSSの修正
結果
感想
参考URL

Google Fontsとは

Google先生がやっている完全無料でWebフォントを使用できるサービスのことです。商用利用でも無料です。今までは英語のWebフォントがメインだったのですが、日本語の正式版がでました。なんと明朝体もあるのです！！これはいれないと！！

Webフォントは、重いファイルなのですがgoogle先生のfontsだと端末側にダウンロード（キャッシュ）されている可能性が高いため、ダウンロードにいかない可能性があるその分、早く表示されるというSEO的にいい部分です

明朝体とゴシックについて

明朝体は、横線に対して縦線が太く、横線の右端、曲り角の右肩に三角形の山（ウロコ）がある書体です。一方、ゴシック体は、横線と縦線の太さがほぼ同じで、ウロコが（ほどんど）ない書体です。筆書体は、筆で書いた文字を再現したような書体で、行書体や隷書体などが含まれます。 ... 日本語の明朝体に対応します。

http://tsutawarudesign.com/yomiyasuku1.html
より引用

困った事

bashalog.c-brains.jp

明朝体ですが、力強いです！読者としてはこれくらいのほうが見やすいです。

え・・・(・∀・)・・・わからん。力？？どこ？？
長文だとやっぱり明朝体の方が読みやすい？
やっぱりデザインは難しいな～

わからないけどを明朝体をいれてみた

導入手順

fontをヘッダーで読み込ませる

f:id:masalib:20180822155015j:plain
はてなブログの編集画面に行く　
→　【　設定】をクリック
→　【詳細設定】をクリック
f:id:masalib:20180822155031j:plain
→　【headに要素を追加】
下記の内容を追加する

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">

CSSの修正

f:id:masalib:20180822155057j:plain
はてなブログの編集画面に行く　
→　【　デザイン】をクリック
f:id:masalib:20180822155105j:plain
→　【　カスタマイズ】をクリック
→　【　デザインCSS】をクリックして修正する

html, body {
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
        color: #454545;
}

修正前

html, body {
        font-family: 'Sawarabi Mincho','Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
        color: #454545;
}

修正後

自分はテンプレートを使っていたので
テンプレートのCSSをダウンロードして無理やり修正した・・・
使う人はいないと思うけどCSSを記載する

cssの全文です。クリックすると展開されます（超ーー長文なので注意！！）

はてなブログのデザインcss