Webフォントを必要な文字だけ抜き出して使う：らっぱ王子

こないだこのサイトに導入してみた、Webフォント「Noto Sans JP」。なかなか可読性が良くていい感じ。ただ、文章としてはいいのだけど、サイトタイトルのフォントは文字詰めができて、遊び心のあるものにしたい…

しかし「らっぱ王子」この5文字だけのために、容量の多い日本語フォントを読み込むのは気が引ける。調べて見ると、必要な文字だけ抜き出したフォントファイルを作って、Webフォントとして使うことができるらしい…！

そしたら、軽快にWebフォントが使えるぞ！

え？ Word？

え？と、とりあえず文字は「らっぱ王子」で、フォントは「源暎ラテミン詰 v2」にしたいです。

なんだ、XPSって。

WordやExcelといったファイルをXPSファイルに変換すると、環境に依存せず様々なコンピュータでファイルを表示できます。また編集不可能な為、改ざんされたくない文書を配布する場合にも便利です。

そういうのがあるのか。しかし、どうしてXPSを？

え？ zip？なんで？

うわ、開いた。あー、フォントがXPSファイルに内包されるのだね！これが抜き出されたフォント？

これで、難読化とやらが直るらしい。

サイトタイトルは「h1」で囲んでるので、こうしてみる。

@font-face {
    font-family: '任意の名前', sans-serif;
    src: url('～/任意の名前.ttf');
}

h1 {
    font-family    :'任意の名前';
}

で？どうなる？お？　変わった！

…いや、これ変わったけど違うぞ。
たぶん、保険で入れといた「sans-serif」が表示されてる。

このへん違うよね。これ、どうしたらいいんですか？

もうー！

どうやってもCSSで「@font-face」が効かない。フォントが変わらない。CSSの記述よりも前に記述しないといけないらしいので、一番最初に入れてるんだけど。

…で、いろいろ調べて見たら、この ttf は腐っているらしい。
また、ttf より、woff の方が、ブラウザでの互換性が高いらしいぞ。

で、たどり着いたのがこちらのサイト。「Convertio」
ファイルを選ぶで「任意の名前.ttf」を選び…

「に[SVG]」となっているところを「フォント」の「WOFF」にして「変換」する。

変換されたら「ダウンロード」する。ダウンロードした「任意の名前.woff」をサーバーにアップする。

CSSの記述を修正する。問題切り分けのため、一旦、保険のフォントは指定しないことにした。

@font-face {
    font-family: '任意の名前';
    src: url('～/任意の名前.woff');
}

h1 {
    font-family    :'任意の名前';
}

おっ！源暎ラテミンで表示された！

５文字だけのフォントなので、容量は92KB。軽くて読み込みのラグは感じない。試しに「源暎ラテミン詰 v2」を丸ごとWoffに変換すると、5,170KB。光回線のPCで読み込んでみたら表示されるまで６秒ほどかかった。スマホの4Gだと、もっとかかるんじゃないだろうか。

必要な文字だけ抜き出したWebフォントは軽快！