昨日久しぶりにブログを更新すると、本文のフォントがなんとなくイマイチに感じました。先日の案件でもWebフォントを利用したので、もう少し知見を深めることも兼ねて「Noto Sans Japanese」を当サイトに導入してみました。
昨日はlink要素でfonts.googleapis.comを指定する方法で導入したのですが、最近リニューアルしたミツエーリンクスのコーポレートサイトを見ていると「Noto Sans Japanese」をセルフホスティングして配信されているので、僕も試してみたくなりました。配信までの作業過程を簡単に記録しておこうと思います。
サブセット化とWOFF2化
「Webフォントを軽量化する！サブセット化とセルフホスティング |東京のWeb制作会社｜株式会社ENVY DESIGN」を参考にしました。
まずは「Noto Sans Japanese」のバリアブルフォントをダウンロード。展開して武蔵システムの「サブセットフォントメーカー」でサブセット化を試みました。サブセット化する文字の選択は「日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB」を参考にし、「JIS第1水準＋常用漢字＋その他でまとめると（3759字）」に列挙されている文字にしました。
その後、WOFF2にコンバートしてCSSで指定、表示を確認したのですがなぜかフォントが全て細い…。CSSの指定は間違えてなさそうだしなんだろう？、と考えたのですが、Wakamai Fondueで確認してみると全然バリアブルでないフォントになっていました。ここでサブセットフォントメーカーは使えないのか、と悟りました。
fonttoolsでサブセット化とWOFF2化
何か良いサブセット化ツールはないかと探してみたところ、「How to subset a variable font | Clagnut by Richard Rutter」で紹介されている「fonttools」が適しているようなので試してみました。
サブセット化する文字をファイルに書いて渡せないかな？と考えたのですが、ちょうど--text-fileオプションがあってテキストファイルが指定できたので助かりました。その他のオプションはひとまずブログで紹介されていたものを指定しました。
pyftsubset ./NotoSansJP-VariableFont_wght.ttf --text-file=subset.txt --layout-features="*" --flavor="woff2" --output-file="NotoSansJP-VariableFont_wght.woff2"生成されたWOFF2ファイルを再びWakamai Fondueで確認すると、容量や収録されている文字、Layout featuresが違いますが、ほぼミツエーリンクスのコーポレートサイトと同じものができたようです。
適用
CSSファイルに必要な記述をして表示確認したところ、今度は意図した表示になりました。現在サイズが約1.1MBなので、もう少し軽量化できないかなと考えています。最近のオフタイムはPHPを書いていることが多い気がするので、フロントエンドも頑張らなければと感じました。