CSS Font Unicode Range

Can I use CSS unicode-range to specify a font across an entire (third party) page?

The answer is yes in most browsers

MDN - Unicode Range

The unicode-range CSS descriptor sets the specific range of characters
to be downloaded from a font defined by @font-face and made available
for use on the current page.

Example:

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

Support: CanIUse.com

Also see this Article

W3C CSS validator is giving errors on @font-face unicode-range

This is a defect of the validator.

The CSS Fonts Specification defines the unicode-range property as

Value: <urange>#

where <urange> can be any of

single codepoint (e.g. U+416)<br>
    a Unicode codepoint, represented as one to six hexadecimal digits

interval range (e.g. U+400-4ff)<br>
    represented as two hyphen-separated Unicode codepoints indicating the 
     inclusive start and end codepoints of a range

wildcard range (e.g. U+4??)<br>
    defined by the set of codepoints implied when trailing '?' characters 
    signify any hexadecimal digit

And the # means

... that the preceding type, word, or group occurs one or more times, separated by comma tokens (which may optionally be surrounded by white space and/or comments).

The specification underlines this formal definition in prose:

This descriptor defines the set of Unicode codepoints that may be supported by the font face for which it is declared. The descriptor value is a comma-delimited list of Unicode range () values.

It also provides examples. Example 30 is particular useful:

@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}

If you submit this to the CSS validator, it will report the same error. Since the spec is authoritative, the validator must be in error.

CSS - apply unicode range to brower-installed font

You can use local(), an example:

@font-face {
  font-family: 'CustomConsolas';
  src: local('Consolas');
  unicode-range: U+0061-0100;
}

How to subset Basic Latin (128 glyphs) with the Unicode range descriptor

You can't reduce the amount of data transferred with unicode-range. It's only used for deciding if a font should be loaded at all:

"If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded"

So no special server configuration is needed beyond just serving the font files as-is for unicode-range to function.

If you want to only download certain characters you need to create a whole new font file that only has certain characters. When I've needed to create optimized font subsets, I've done so manually by editing the font with FontForge to remove glyphs I don't need. You could also automate the process with software such as pyftsubset.

How to apply font-face only to a certain range of Unicode characters

Since the Battambang typeface doesn’t contain those characters, they’re falling back to what you specified: cursive. Use the one that would normally be inherited instead.

font-family: Battambang, Roboto; /* or whatever it would be normally */

For typefaces that do contain characters you want excluded, you’ll also need to specify a unicode-range:

@font-face {
    src: /* … */;
    font-family: Battambang;
    unicode-range: U+1780-17FF, U+200B-200C, U+25CC;
}

Error: CSS: unicode-range: Too many values or values are not recognized

I happen to be doing the same case as well. From what I've gathered, U+A720-A7FF can be found in Poppins font, just not in the stated font face. That's the reason why there's an error. I hope this helps you.U+A720-A7FF

---

Related Topics