【はてなブログ】Googleの日本語Webフォントをブログに導入する方法まとめ

はてなブログにGoogle日本語WeBフォントを導入する方法

ブログのカスタマイズにハマっています、KiKi(@kiki_ro_ck)です。

恥ずかしながらグーグルフォント、いや「Webフォント自体」を初めて知ったんですが、サーバーからフォントが読み込めるそうですね☆

今まで、日本語Webフォントのほとんどが有料だったんですけど、Googleが無料配信しているGoogle Noto Fontsの日本語フォント[ Noto Sans CJK JP ]を見つけました。

はてなブログへの導入方法をシェアしたいと思います。

※CSSを変更する際は、必ずバックアップをとりましょう。

導入したのはNoto Sans CJK JP

Noto Fonts CJK JPとは、Googleとadobeが共同開発をしたフォントです。

コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを"豆腐"と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った。

出典:Noto - Wikipedia

まさかNO豆腐という意味だったとは!何だかかわいい☆

Googleフォントの導入はEarly Accessを使う

Googleフォントの導入方法はいろいろあるようですが、こちとらブログなので、Early Accessから提供されているものを使うことにしました。 

Early Accessは正式なものではなく、テスト版のようです。

もしかしたら不安定かもしれないですね。いきなり表示されなくなるかもしれないけど、ごめんね☆みたいな感じでしょうか?(小並感)

ライセンスは[ Apache License 2.0 ]で配布されていましたが、2015年9月に[ SIL Open Font License 1.1 ]へ変更されています。

著作権明記については、Webフォントとライセンスを参考にさせて頂きました。

link要素で外部ファイルを読み込む方法

読み込む方法はいろいろあるんですけど、1番簡単で「表示が早い」と言われている方法にしました。

まず下記のテキストをコピーします。

<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' type='text/css' rel='stylesheet' >

[ダッシュボード]⇒[設定]⇒[詳細設定]の[headに要素を追加」に貼り付けて[変更する]

一応ですが、著作権表記はcss内でいいと思うので下記のテキストをコピーして、

/* "Noto Sans CJK JP" licensed under the SIL Open Font License
 * https://www.google.com/get/noto/#sans-jpan*/

[ダッシュボード]⇒[デザイン]⇒[カスタマイズ]の[デザインcss]に貼り付けておきましょう☆

使いたいところへfont-familyを指定する

最後は[ font-family ]を指定します。

Early Accessには例として[ font-family: 'Noto Sans JP', sans-serif; ]とテキストがあるだけなので、これを元にデザインcssへHTMLを貼り付けます。

ちなみに、フォントを変える時、そのフォントのみを指定すると表示されない場合もあるので複数指定はしておいた方がいいです。

[ font-weight: (ここに数字); ]で文字の太さも変えられます。お好みの太さを[ Noto Sans CJK JP ]でチェックしておくと◎

/* 全体的なフォントを変更する */
body {
font-family: 'Noto Sans Javanese', sans-serif ;
font-weight: 900;
}

/* ブログの名前のフォントを変更する */
#title a{
font-family: 'Noto Sans Javanese', sans-serif;
font-weight: 900;
}

/* ブログ本文のタイトル */
.entry-title {
font-family: 'Noto Sans Javanese', sans-serif ;
font-weight: 400;
}

/* 見出しの文字のみを変更する */
.entry-content h3 {
font-family: 'Noto Sans Javanese', sans-serif ;
font-weight: 400;
}

Webフォントのメリット、デメリットを考える

日本語WEBフォント メリット デメリット

今までのフォントは、

  1. 配布先からフォントファイルをダウンロード
  2. ファイルをパソコンの中にインストール
  3. そのフォントを画像化
  4. サーバーにアップロード
  5. やっとみんながWebで見れる☆

ざっくりですがこんな流れなので、画像編集のスキル&センスがないわたしにとって、フォントを使うことは結構大変なことでした。フォント好きだけど!

Webフォントのメリット

Webフォントは対応したブラウザからであれば、Webからフォントがインストールされるので画像化する必要がありません。

しかもテキストで表示されるので、編集・修正に時間を取られない。見ている人もコピーや検索ができるので、どちらも幸せ\(^o^)/

Webフォントのデメリット

デメリットはやはり、ページの表示速度が遅くなることです。しかも日本語フォントとなると漢字・ひらがな・カタカナ・英数字と読み込む文字数が多いので、さらに表示時間がかかります。

表示速度、、、これはネット環境やサーバーにもよると思うので、人それぞれと思うんですけどね…ただ調べてみると、解決策もいろいろ出ているので、結局はWebフォントの使い方次第だと思いました☆

まとめ

以上、長くなってしまいましたが、こんな感じで導入できるはずです。そしてご意見やご指摘ありましたら、是非ともお願いします!

こんな記事も書いてます、↓

www.kikicom.net

☆ツイッター(@kiki_ro_ck)始めました、お気軽にフォローミ―!無言フォロー大歓迎です。話しかけられたら喜びます。