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

些細な日常

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

ホームページ(ブログへ移転)でGoogle FontsEarly 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フォントを操作するのと変わらないくらい細かいから本当に凄いと驚くし、喜ばしい。

参考サイト

コメント

最近の投稿

日付: 

冬の防寒対策として最も温めるべき首と手首と足首

イメージ

人気の投稿

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...