Text and typography / unicode-range
How to use different fonts for different scripts in a PDF
unicode-range restricts a @font-face to a set of code points, so the browser only uses that face for characters inside the range.
What it is for
A document with Latin text and a Chinese address should use the brand font for one and a CJK font for the other. Without ranges the whole document falls to whichever font is listed first and covers the character.
Support: Works everywhere
Works. It also reduces the embedded font size, because a face restricted to a range only needs the glyphs in it.
The syntax
Written the way it would appear in a document stylesheet, using unicode-range as intended.
css
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+2000-206F; /* Latin and punctuation */
}
@font-face {
font-family: "Noto Sans SC";
src: url("/fonts/noto-sans-sc-400.woff2") format("woff2");
unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF;
}
.document { font-family: "Brand Sans", "Noto Sans SC", sans-serif; }The mistake people make
Subsetting a CJK font to the characters in one test document. The next document has a name with a character you did not include, and it renders as a box.
Frequently asked
Does unicode-range work when generating a PDF?
Works everywhere. Works. It also reduces the embedded font size, because a face restricted to a range only needs the glyphs in it.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
Paste the CSS and see what the rendered page does with it.