Webフォントを使用する際はサブセット化してwoff形式にしよう

日本語Webフォントは重たい

日本語が収録されたウェブフォントはすごーく重たいのです。NotoSansCJkjpセットが141MBくらい。これを以下のように生のまま指定すると重たいだけでなくブラウザや環境によってはウェブフォントが適用されないことがあります。

@font-face {
    font-family: "NotoSansCJkjp";
    font-weight: 400;
    src: url("font/NotoSans_regular.woff") format("woff");  
}

そこで軽量化の手段として、「サブセットフォントメーカー」を使用して、JIS規格の第一水準の文字列だけをフォントに格納するといういわゆるサブセット化をします。

第一水準漢字の一覧はこちらに上がっているのを使わせてもらっています。

サブセット化によって9割は軽量化されます。

9割軽くなったからといってotfやttfのまま指定するのは甘い。「WOFFコンバータ」によってWOFF(Web Open Font Format)形式にすると更に1割ほど容量を削減することができます。

ただし、Android4.3など古いブラウザや一部環境ではwoffをサポートしていませんが、古いデバイスを使用しているということは見た目よりもコスパを重視している可能性が高いので、ウェブフォントなしでも構わないのかなと思います。