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.
@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.
How to embed a custom font in a PDF
@font-face. Works everywhere.
Which font-display value should a PDF use
font-display. Works everywhere.
How to align numbers in a PDF table column
font-variant-numeric. Works everywhere.
How to enable hyphenation in a PDF
hyphens. Works everywhere.
How to wrap long URLs and reference numbers in a PDF
overflow-wrap. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.