スキップしてメイン コンテンツに移動

些細な日常

Google FontsのEarly accessはCSSのfont-faceで軽量化して使える

ホームページ（ブログへ移転）でGoogle FontsのEarly accessから日本語フォントのNoto Sans Japaneseを無料で使っている。とても気に入っていてAndroidのスマホでマシュマロから搭載されているのも嬉しいかぎりだ。

しかしWebフォントとしてホームページにCSSへlinkのstylesheetや@importで取り込んで表示するのは非常に厳しくて表示速度を著しく低下させる。日本語は漢字が多くて英語などと比べるとデータサイズを大幅に増やしてしまうせいだ。3MBくらいだからちょっとした画像を300KBとして換算しても、百枚、載せているのと変わらない。

追記：Google Fonts launches Japanese support（Googleフォントは日本語のサポートを開始）によるとフォントスライシングシステムによって、八割程、日本語のファイルサイズを削減できたようだ。世の中の使用頻度に則って分割して少しずつダウンロードするという方式が採用されたんだ。するとCSSで敢えて軽量化する必要はないかも知れない。Webフォントとして普通に使ってもNoto Sans JPが最初のダウンロードで500KBくらいに縮小されている。CSSで軽量化するのと比べても半減しているから本当に使い易くなったし、ホームページでも新しく取り入れ直した。

追記：Google Fontsを普通よりも速く読み込む方法が見付かった。

他にも明朝体のNoto Serif JPがリリースされたのが素晴らしいと思う。ファイルサイズはゴシック体のNoto Sans JPよりも大きめで、最初のダウンロードで900KBくらいになっている。

デザインを優先して表示速度を削るしかなかったホームページに朗報が飛び込んで来みたいに軽量化する方法をついに発見した。

Google FontsのEarly accessは普通だと一つのフォントを使っても様々な太さが含まれているためにデータサイズが膨らんでいる。実際に使いたいのは一つだけだとしても全てを読み込むからサイトの表示速度が必要以上に遅くなってしまうわけだった。

本来はダウンロードしてデバイスから自分でバージョンを選んだり、または必要な文字だけをサイトにアップロードして使うから表示速度への影響は少なかったので、それと同じようにできればむろんGoogle FontsのEarly accessはさらにもっと素晴らしかった。

望ましくもCSSのfont-faceから読む込むと太さを絞り込みながらデータサイズを減らして使えると分かって来た。

Noto Sans Japaneseのフォントウェイト400

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src:
local('Noto Sans Japanese'),
 
  
 url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
  
  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
  
  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}

サイトのCSSのstyle内に取り込んでHTMLへfont-family要素で指定すれば反映する。

CSSのfont-faceのサンプルのソースコード

<style>
@font-face {
font-family: 'Noto Sans Japanese';
（中略）
}
body {font-family:'Noto Sans Japanese', sans-serif;}
</style>

使い方は@importの場合と同じだ。違うのはフォントフェイトを一つだけに絞り込んで他の種類は駄目だけれども代わりにサイトに読み込むWebフォントのデータサイズを減らせる。スマホでは軽量化しないと表示速度が大変なので、非常に有り難いと個人的に思う。

Early accessでのフォントウェイトの抽出

Google Fontsから提供されているEarly accessのURLを開くと様々なフォントウェイトが載っているので、どれかを一つを選べばfont-faceのために丸ごと抽出できてCSSのstyle内へコピー＆ペーストして直ぐに使える感じだ。

リンク先がsrc属性で「woff2」と「woff」と「opt」の三つに分かれている。Webフォントの拡張子で、Early accessが配信するサーバーに収められたファイルが違う。それぞれの規格／formatが違うためで「woff2」と「woff」と「opentype」として分かれてもいるんだ。

Woff2
圧縮率が高めのフォント
Woff
圧縮率が低めのフォント
Opentype
非圧縮のフォント

ブラウザによって読み込めるかどうかに差があるので、サイトで全般的に反映させるためには三つとも入れておくのが無難だ。

万一、読み込めない場合に備えてCSSのfont-familyでは汎用版のフォントを付け加えておくのが良いかも知れない。

サンプルのソースコードでは「sans-serif」（サンセリフ：ひげ無し書体）を「Noto Sans Japanese」の後ろに続けて記載している。

font-face要素はWebフォントが記載された順番に読み込まれるので、src属性のリンク先では「woff2」が「woff」や「opentype」よりも優先されるけど、しかし全体的には「local」が最優先される。他とは別にデバイスへ指定しているんだ。

Noto Sans Japaneseだと現時点でマシュマロ以降のAndroidスマホの日本語として搭載されている（詳しくはNoto Sans CJKだから字数は多めに含まれる）ので、ブラウザはEarly accessからインターネット通信で読み込まずに済んでサイトでは最速で表示されるようになる。

Google FontsのEarly accessはfont-face要素にunicod-range属性で文字のユニコードを指定してサイトに取り込む文字数を減らす／サブセット化も可能になっているらしい。

font-faceの「些細な日常」のunicode-range

@font-face {
（中略）
unicode-range: U+4E9B, U+7D30, U+306A, U+65E5, U+5E38;
}

サイトのタイトルなどでWebフォントを少しだけ使いたいような場合には数多くの余計な部分を省けるから非常に便利だろう。

文字のユニコードはUnicode文字ツールを使うとあっさり変換できた。unicode-range属性の値のユニコードの書式は「U+」から所定の四つの英数字で入力する。複数ならば半角のコンマ（,）で区切る。範囲ならば開始は「U+」を付けて終了は外して半角のハイフン（-）で繋ぐ。単一も含めて複数と範囲は全て半角のコンマで区切って同時に指定できる。

念のためにいっておくとCSSとユニコードはブラウザが対応ているかぎり、サイトで反映するので、ちゃんと表示されない場合も全くないわけではないから汎用版のフォントなどを代わりに予め設定しておくべきだろう。

Google FontsのEarly accessはCSSのfont-faceで取り込むと軽量化できてしかも機能がパソコンでWebフォントを操作するのと変わらないくらい細かいから本当に凄いと驚くし、喜ばしい。

参考サイト

コメント