読者です 読者をやめる 読者になる 読者になる

Googleの日本語Webフォントをブログに導入する簡単な方法

Googleの日本語Webフォントをブログに導入する方法は簡単です

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

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

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

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

導入したのはNoto Sans CJK JPという日本語フォント

Google Noto Fonts - Noto Sans CJK JP

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

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

出典:Noto - Wikipedia

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

  • 関連リンク:Google Fonts ― Google Webフォント(こちらは日本語なし)

Google Fontsの導入はEarly Accessを使いました

導入はフォントファイルをサーバーへダウンロードする方法があるようですが、こちとらブログなので、Early Accessから提供されているものを使うことにしました。 

ただEarly Accessは正式なものではなくテスト版のようで、もしかしたら不安定かも?いきなり表示されなくなるかもしんないけどごめんね☆みたいな感じでしょうか(小並感)

ライセンスはApache License 2.0で配布されていましたが、2015年9月にSIL Open Font License 1.1へ変更されています。著作権明記についてはWeb フォントとライセンスを参考にさせて頂きました。

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

2種類の方法があります。①②お好きな方で構いません。詳しいことはよくわからないですが、どうやら①の方が「表示が早い」という記事がちらほら。

というわけで、わたしも①の方法で行っています。

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

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

メニューを開いてデザイン→カスタマイズと進み、

f:id:kikixxxx:20160120140954j:plain

①ヘッダ→②タイトル下→③の場所に貼り付けます♪

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

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

メニュー→デザイン→カスタマイズ→【デザインcss】に貼り付けます。

Google Fonts : Early Accessからコピペする方法

参考にしたのはGoogle Fonts : Early Accessの中にある、Noto Sans Japanese (Japanese)のLinkとExampleの部分です。

まずこちらのテキストをコピーします。

/* "Noto Sans CJK JP" licensed under the SIL Open Font License
 * by https://www.google.com/get/noto/#sans-jpan*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

メニューを開いてデザイン→カスタマイズと進み、

f:id:kikixxxx:20160119232917j:plain

【デザインcss】へ貼り付け!大体すでにどこかの@import…が貼ってあると思いますが、こちらを1番上に貼り付ける方がいいかもしれません。なぜかその方がうまく表示されました。

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

上記の①、または②の方法でコピペできたら、最後はfont-familyを指定します。

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

ちなみにフォントを変えたい時、そのフォントのみを指定すると表示されない場合もあるので複数指定はしておくべきです。わたしはsans-serifだけじゃ心持たなくて、

標準フォントを指定する - ウェブデザイン hasegawahiroshi.jp

こちらのサイトを参考に、ずら~っと指定してみましたが…多くなっちゃった☆お好みで減らしても構いません。

「font-weight: (ここに数字);」で太さも変えられるのでNoto Sans CJK JPでお好みの太さを見つけてくださいね。

/* 全体的なフォント */
body {
font-family: 'Noto Sans Javanese',"游ゴシック体","Yu Gothic","YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 900;}

/* ブログタイトルh1・ブログ説明文h2 */
h1,h2 {
font-family: 'Noto Sans Javanese',"游ゴシック体","Yu Gothic","YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 900;}

/* 見出し h3,h4,h5 */
h3,h4,h5 {
font-family: 'Noto Sans Javanese',"游ゴシック体","Yu Gothic","YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 400;}

/* サイドバーのタイトル */
.hatena-module-title {
font-family: 'Noto Sans Javanese',"游ゴシック体","Yu Gothic","YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 400;}

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

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

今までのフォントは、

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

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

でもWebフォントは対応したブラウザからであれば、Webからフォントがインストールされるので画像化する必要がありません。しかもテキストで表示されるので、編集・修正に時間を取られない。見ている人もコピーや検索ができるので、どちらも幸せ♪

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

表示速度、、、わたしは気にならなかったので導入しちゃいました。調べると解決策もいろいろ出ているので、結局はWebフォントの使い方次第なのかと思いますね。

まとめ

以上、長くなってしまいましたが、こんな感じで導入してみました。

導入方法は簡単なので参考にどうぞ~。でも試す前にはバックアップ推奨です。元のcssの内容を別にコピペして保存するなど。端末環境は人それぞれですし、全ての人がわたしの方法で出来るとは限りません。

そしてご意見やご指摘ありましたら是非ともお願いします。…もう頭が動きませんorz

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

あと遅咲きながらツイッター始めました@kiki_co_m。使い方は模索中…。

読んでいただきありがとうございました。

 

広告を非表示にする