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

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


日本語早期アクセスとして公開されていた日本語 Google Web Fonts が正式版になっていますので使ってみましょう。



ウェブフォントとは?

今さら私がどうこう書く必要もありませんが、簡単にまとめますと、ウェブフォントとは

  • 通常ウェブは、デバイスが持っているフォントで表示されるが、ウェブフォントは、ファイルデータをネットからダウンロードしてくる

利点は、

  • デバイス環境に左右されず同じフォントで表示することができる
  • フォントデザインを画像にしなくてもテキストで固定できる

欠点は、

  • 日本語フォントはファイル容量が大きく実用的ではなかった
  • その欠点を必要な文字フォントのみのサブセット版で対応していた

で、Google Fonts はその欠点を何らかの技術で解消し、現在のところ8書体を正式版として公開している

ということ(であっているはず)です。


日本語 Google Fonts の導入

fonts.google.com


f:id:ausnichts:20181021203227j:plain

まず、Google Fonts にアクセスします。


f:id:ausnichts:20181021203856j:plain

Languages を Japanese にしますと、日本語フォント8書体が表示されます。


f:id:ausnichts:20181021204255j:plain

使用したいフォントの右上の「+」をクリックしますと、「ー」に変わり、下に Family Selected とタブが現れます。


f:id:ausnichts:20181021204712j:plain

タブの「ー」をクリックし、CUSTOMIZE をクリックし、使用する font-weight と Languages の Japanese にチェックを入れます。この Languages のチェックの意味は今のところよくわかりませんが、チェックを入れますと、埋め込みコードに subset=japanese が追加されます。チェックを入れなくてもウェブフォントで表示されますが、サブセットとありますので、これによって何らかの処理がされ高速化されるのではないかと想像します。


f:id:ausnichts:20181021205834j:plain

ENBED に戻りますと、設定に必要なコードが出来上がっています。


<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese" rel="stylesheet">
font-family: 'Noto Sans JP', sans-serif;


はてなブログに設定する

設定 > 詳細設定 > headに要素を追加

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese" rel="stylesheet">

を追加し、


デザイン > カスタマイズ > デザインCSS に、(たとえば)

html,
body {
    font-family: 'Noto Sans JP', sans-serif;
}

のように追加します。


f:id:ausnichts:20181021210956j:plain

Noto Sans に変わっています。

表示速度は測定してみないとわかりませんが、体感上は気になりませんね。


www.tokotokotekuteku.com

本文がウェブフォントの Noto Sans JP で表示されているサイトです。