Google fontsの見た目そのままにサブセット化する手順

Google fontsは端末によらずフォントが固定になるのでデザインの崩れなどを考えなくてよいので大変便利です。

ところが、日本語のGoogle fontsはCDNからの読み込みに工夫されているので十分速いのですが、トータルサイズが大きいのでネットワークの環境や速度に依存してしまいます。それを回避しようと色々な方法がありますが、今度は非同期で読み込むとちらつく問題があります。

いいかげん嫌になったので、Google fontsをセルフホストしてサブセット化しようと思いました。ネットに転がっている情報そのまま行ったところ、同じフォントなのに見た目が変わってしまいました。

この記事では、CDN経由で読み込んでいるGoogle fontsと全く同じ見た目になるようにサブセット化する手順をまとめています。

この記事で分かること

Google fontsのサブセット化でダメだった方法
CDNのGoogle fontsと同じファイルからサブセットを作成する手順
サブセット化するとどれぐらいファイルサイズが小さくなるのか？
まとめ

Google fontsのサブセット化でダメだった方法

いつも読み込んでいるGoogle fontsと違うせいなのかわかりませんが、この手順でサブセット化したフォントを読み込むとフォントの見た目が変わってしまいました。

いつも読み込んでいるGoogle fontsと違うものなのかもしれないし、最初は仕方ないかな？と思ったのですが、あまりにも見た目が変わってしまったのでこの方法は採用しませんでした。

①いつもと違うGoogle fontsのサイトからダウンロードする

Download familyをクリックしてzipをダウンロードします。

Noto Sans Japanese - Google Fonts

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans ...

②サブセットメーカーとWOFFコンバーターで変換

ダウンロードしたotfファイルをサブセットメーカに入力して、その後、WOFFに変換します。

サブセットメーカー

サブセットフォントメーカー

変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf、.ttc）、OpenTypeフォント（拡張子.otf、.ttc）を指定できます。

サブセットの指定は面倒なので以下のサイトのものを使います。

「JIS第1水準＋常用漢字＋その他でまとめると（3759字）」

日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB

WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化

woffコンバーター

WOFFコンバータ

③woff/woff2をサーバーにアップロードする

フォントファイルをサーバーにアップロードして格納します。

CSSでそのファイルの場所を指定するので、メモしておきます。

④CSSに記述を追加

フォントをアップロードしたパスに書き換えて、追加CSSなどに貼り付けます。

@font-face {
  font-family: "NotoSansJP-Regular-subset";
  src: url("path-to-fontfile/NotoSansJP-Regular-subset.woff2") format("woff2"),
       url("path-to-fontfile/NotoSansJP-Regular-subset.woff") format("woff");
}
body {
  font-family: "NotoSansJP-Regular-subset",sans-serif;
}

CDNのGoogle fontsと同じファイルからサブセットを作成する手順

よく知られた手順でサブセット化したら、見た目が変わってしまったので、別の方法を検討しました。

こちらの手順で行うと、サブセット化＋セルフホストしても見た目は全く変わりません。

①google-webfonts-helperからフォントをダウンロード

google webfonts helperという便利なサイトがあって、いつも使っているCDNのフォントをそのままダウンロードしてくれます。

私は、japaneseとlatinを選択して、regularと700に✓してダウンロードしました。

https://google-webfonts-helper.herokuapp.com/fonts/noto-sans-jp?subsets=japanese,latin

zipファイルにはサブセットメーカーに入力できる形式のフォントが含まれていないので、変換する必要があります。

②woff⇒otf形式に変換

otf形式に変換するソフトが必要になりますが、実はすでにあります。

WOFFコンバーターは、woffファイルを入力に指定して変換するとotfファイルを出力してくれます。

③サブセットメーカーでサブセットを作成しwoffに変換

既に行っている手順と同じなので割愛します。

④woffとwoff2をサーバーにアップロードします

フォルダを作って分かりやすいところにアップロードします。

⑤CSSに記述を追加

フォントをアップロードしたパスに書き換えて、追加CSSなどに貼り付けます。

display:swapをつけないと初回読み込み時に文字が表示されない期間が出てしまいます。

/* noto-sans-jp-regular - latin_japanese */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  
  src: url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-regular-subset.woff2') format('woff2'), 
       url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-regular-subset.woff') format('woff')
} 
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  
  src: url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-700-subset.woff2') format('woff2'), 
       url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-700-subset.woff') format('woff')
}

⑥preloadを追加

フォントファイルの読み込みを高速化するためpreloadを追加します。

add_action('wp_head',function(){
?>
  <link
    rel="preload"
    as="font"
    type="font/woff2"
    href="/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-regular-subset.woff2"
    crossorigin
  />
  <link
    rel="preload"
    as="font"
    type="font/woff2"
    href="/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-700-subset.woff2"
    crossorigin
  />
<?php
});