ビボロク。どこかで誰かのためになるWebのTIPS・ノウハウ。備忘録として残しておきます
   
           

Googleフォントの日本語は重い？可変フォントや静的フォントの最適な設定は？検証してみた

  • 投稿日／更新日
  1. home ＞
  2. website ＞

Googleフォントやフォントサービスをウェブサイトで利用する機会が多くなったように思います。昨今のフォントではVariable font（可変フォント）が注目されているのですが、メリット・デメリットがいまいちわかりにくく、他のブロクの記事を見ても一番知りたい要点が書いてなかったりしています。GoogleのCDNから読み込む設定に関してはいくつかパラメーター要素があるのですが、その最適解はよくわからなかったり、そもそも日本語フォントはデータが容量が大きいとか、Javascriptで追加した場合には適用されない云々など、いろんな疑問点を解消するために全部自分で検証してみました。

前提

今回使用するGoogleフォントは、可変フォントはNoto Sans Japanese、静的フォントはZen Maru Gothic。googleフォントの管理画面ではそれぞれ「Variable」「Static（またはN Styles）」として表示されています。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Noto Sans JP -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

<!-- Zen Maru Gothic -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap" rel="stylesheet">

CDNから読み込む形式はGoogleが指定する上記のHTMLタグを利用します。このwght@100..900という書き方が可変フォントの特徴です。このパラメータも変えることで変化が起きるのか試してみます。Zen Maru Gothicのウェイトは検証中に増やすことがありますが、その場合はwght@100;300;500といった設定になります。

ページ上で使用する文字列は上記を検証のベースとします。この文字列を複数回使用した場合や、新たに別の文字列を追加した場合などにフォントの読み込みに変化が起きるのかを調べてみます。

検証は、Chromeの開発者ツールにあるネットワークタブで確認します。上記はgoogleフォントを読み込んでいない場合ですが、読み込むとGoogleフォントのCSS（以下、CSSと表すものはこのGoogleフォントのCSSのことを指します）とwoff2というファイルが読み込まれるようになります。このwoff2はフォント圧縮ファイルになります。この容量と、CSSの容量に変化が起きるのかをチェックしています。

また、サーバーにフォントデーターをアップした場合の容量や、Javascriptでテキストを追記した場合にどうなるのか、てんこ盛りの検証でお送りいたします。一番下の結果だけ見れば十分です。

Variable（可変フォント）Noto Sans JP

01：Googleフォントを読み込んだ場合

CSS2?～とあるのがGoogleフォントのCSSです（sytle.cssは無視してください）。これが30.8KB、woff2は合計で182KBとなっています。日本語フォントを使用するとフォントデータが一括でダウンロードさせられるイメージがありましたが、そういう訳ではないんですね。

02：同じ文字が増えた場合

上記のように、複数回同じ文字列を記述しました。

読み込まれているwoff2のファイルや容量に変化はありません。

03：文字の種類が増えた場合

03-01：増やした文字全部にフォントを適用

上記のように文字列を増やしてみました

縦に長くなったのでキャプチャは一部だけです

読み込まれている.woff2のファイルや容量が一気に増えました。今回の場合534KBになっていました。

03-02：一部文字だけにフォントを適用

わかりにくいですが、「あいうえお」「アイウエオ」などだけがNotoSansです。

基本と同じく、「あいうえお」などをspanで区切り、その部分だけフォントを適用させるとどうなるのでしょうか。

基本と同じ容量になりました。きちんとfont-familyを指定した文字列を判断し、その部分のデータだけ読み込んでくれてるんですね。えらい。

04：ウェイトを使用した場合

04-01 ウェイトをCSSで指定

.weight100 P{font-weight: 100;}
.weight400 P{font-weight: 400;}
.weight500 P{font-weight: 500;}

左から順番に、font-weightを100、400、500を指定しました。

01の場合と比べると、CSS・woff2の容量は増えてません。これが可変フォントの真骨頂ですね。

04-02　パラメーターを変えてウェイトを指定した場合

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500&display=swap" rel="stylesheet">

ウェイトを読み込みパラメータを wght@100;400;500 にしてみました。これが従来のウェイトの読み込み指定方法です。

woff2の容量は変化なし。ただCSSの容量が97.3KBに増加しています。なんでぇ？

05：斜体を利用した場合

.font-style01 P{font-style: normal;}
.font-style02 P{font-style: italic;}
.font-style03 P{font-style: oblique 45deg;}

font-styleでnormal,Italic,obliqueを指定しました。

これもCSS、woff2変化なし。

06：textパラメーターを使用した場合

任意の文字しかGoogleフォントを使用しない場合、textパラメーターを使用して絞り込むことで読み込みを抑えることができます。

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap&text=%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A%E4%BA%9C%E8%A1%A3%E9%9B%A8%E7%B5%B5%E5%B0%8F%E3%82%A2%E3%82%A4%E3%82%A6%E3%82%A8%E3%82%AA12345abcdeABCDE" rel="stylesheet">

<!--あいうえお亜衣雨絵小アイウエオ12345abcdeABCDE-->

ドキュメントではURL エンコードする必要があると書かれてましたが、そのままでも何故かいけました。あと何文字までの制限があると書いているブログもありますが、仕様にはとくに書いてません。

CSS・woff2が絞り込まれて読み込まれています。使用する文字が決まっている場合はこのパラメーター指定が活用できますね。

静的フォント（Static） Zen Maru Gothic

01：Googleフォントを読み込んだ場合

CSSは29.4KB、woff2は81.4KBと、意外にも可変フォントよりもデータ量が少ない結果になりました。静的フォントは日本語フォントを全部ダウンロードと思っていたのですが、こちらも必要な分だけダウンロードしていることがわかりますね。

02：同じ文字が増えた場合

データ量変わらず。

03：文字の種類が増えた場合

行数が多いので割愛

CSSは変わらず、woff2は303KBに。可変フォントよりも少ないです。

04：ウェイトを使用した場合

CSSは88.1KB、woff2は243KBとなり、可変フォントのデータ量を超えました。やはり個々のウェイトデータを読み込むのが容量大に繋がっているようです。しかし思ったよりは多くない。

05：斜体を利用した場合

変わらず。

06：textパラメーターを使用した場合

CSSは319Byte、woff2は4.3KB

可変フォントをサーバーに設置した場合

@font-face {
    font-family: "Noto Sans JP";
    src: url("Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

Noto Sans JPのフォントデーターをダウンロードし、任意のフォルダに展開すると、中に各ウェイトのフォントデーターとNotoSansJP-VariableFont_wght.ttfというデータが入っています。これを上記CSSのように設定すると可変フォントとして使用できます。

ただし容量が9.5MBにもなってしまいます。これは日本語フォントそのままが格納されているためで、サブセット化（使用するフォントのみに絞る）をして容量を削減したほうが良さそうです。ウェブサイト利用ではあまりメリットを感じませんね。

動的に文字を追加した場合

<div id="addtext"></div>

<script>
var add = function(){
  let text = '沼根野羽火風変';
  document.getElementById('addtext').innerHTML = text;   
};
setTimeout(add, 2000);
</script>
window.onload = function(){
 var add2 = function(){
  let text = '流礼路輪温';
  document.getElementById('addtext2').innerHTML = text;
};

setTimeout(add2, 4000);
};

Javascriptで文字を追加するとどうなるでしょうか。HTML内に記述した場合が１、外部Javascriptでかつload後に実行する場合が２とします。ページ内の処理が終わったであろう数秒後に実行してみました。意味があるのかどうかは若干怪しいですが。

新たにフォントをデーターを追加で読み込んでくれました。

結果まとめ

可変フォントはある程度のフォントを読み込む必要があるためか、静的フォントよりも容量が大きい結果になりました。ただしウェイトを複数使用した場合は可変フォントのほうが容量が抑えられることがわかりました。

Variable（可変フォント）

条件CSSwoff2
googleフォントなし––
01：googleフォントを読み込んだ場合30.8KB182KB
02：同じ文字が増えた場合30.8KB182KB
03-01：文字の種類が増えた場合30.8KB534KB
03-02：一部だけにフォントを適用した場合30.8KB182KB
04-01：ウェイトを使用した場合30.8KB182KB
04-02：パラメーターを変えてウェイトを使用した場合97.3KB182KB
05：斜体を利用した場合30.8KB182KB
06：textパラメーターを使用した場合314byte11.7KB

ウェイトや斜体を使用しても、読み込むフォントデーターに変化はありません。ページ上で使用する文字列が増えると、フォントデーターが増えます。また、パラメーターを旧式で指定するとフォントデーターは増えないがCSSの容量が増えます。

Static（静的フォント）

条件CSSwoff2
googleフォントなし––
01：googleフォントを読み込んだ場合29.4KB81.4KB
02：同じ文字が増えた場合29.4KB81.4KB
03：文字の種類が増えた場合29.4KB303KB
04：ウェイトを使用した場合88.1KB243KB
05：斜体を利用した場合29.4KB81.4KB
06：textパラメーターを使用した場合319byte4.3KB

日本語フォントは全部のフォントデーターをダウンロードするといったことはなく、使用した文字列で最適化されてダウンロードされていました。今回は文字の量が少なく、デフォルトは1ウェイトだったため、可変フォントよりも読み込み量が少ないという結果に。ウェイトの一部しか使用しない・フォントを適用する文字列が少なければ、Staticフォントでも支障なしという印象。

サーバーに可変フォントを設置した場合

Noto Sans JPをそのまま使用した場合、正直メリットは感じられません。サブセット化して、使用する文字のみに絞って容量を軽減したり、他のフォントとマージするなど、なにか特殊な用途がない限りは使用はおすすめできないと感じました。どうしてもGoogleのCDNを使いたくない、ローカルのフォントを使いたい場合に限る用途だと思います。

動的に追加した場合

今回の検証ではフォントは無事適用されました。あまり気にする必要はなさそうです。ただ本実験はGoogleフォントに限り、他フォントサービスではうまく適用されないこともあるようです。

最後に

ということで検証は以上となります。個人的に感じていたもやもやは解消されたかなと思います。あくまでも日本語フォントをCDNで読み込む際の検証なので、英文字などフォントデータがそもそも容量が少なければ全然気にすることはないと思います。結果的には、現状ではgoogleフォントを使用する際は転送データ量は気にする必要はほぼなしと判断して良さそうです。

こういったフォントに関する疑問があって仕事上で代理店に聞いたら、他のブログのURLを送ってきて「ネットではこんなことが書いてます」と回答が来てぶん殴りそうになりました。そういう仕事をしない代理店がこの記事を使った場合一律で10万円請求します（嘘です）。

                   

備忘録として残しておきます。                    

関連記事

#web