Optimization of Web Font 05: “unicode-range”

By specifying unicode-range, the Unicode range of characters to be displayed in a certain font can be specified.

In [Web Font Design Technique 05: “Use Mixed Typesetting”], mixed typesetting is sought by utilizing unicode-range. It is also utilized in optimization in some cases.

In unicode-range, the font cannot be read until the character in the specified range is displayed.

@font-face{ font-family: "Hiragana"; src: url("/path/to/Hiragana.woff2") unicode-range: U+3041-3096, U+309D-309F; /* Range of Hiragana */ }

For example, when the above is specified, Hiragana.woff2 cannot be read until the hiragana is displayed on the web page.

To utilize this property, dividing a font into several chunks and specifying unicode-range can prohibit reading font files with unnecessary character types.

For example, “symbol, Latin, Kana, Kanji with the highest appearance frequency, Kanji with the second highest appearance frequency…” would be divided into the files: kigou.woff2, latin.woff2, kana.woff2, kanji1.off2, kanji2.woff2…, respectively, and setting unicode-range for each file will allow you to not download from kanji2.woff2 onwards on the site without difficult Kanji.

In comparison to dynamic sub-setting, the advantage of this method is that the cache is enabled.

Looking at [CSS of Google Fonts], there are unique categorizations for dividing chunks, but it can be understood that the above mechanism is used.

(LN)

Series archive Web Font / Optimization of Web Font