@font-face unicode-range Builder

The unicode-range CSS descriptor is used inside @font-face rules to specify which Unicode characters the font file covers. Browsers use this to decide whether to download a particular font file for the characters present on the page. If all characters fall within the specified range(s), the font is downloaded; otherwise, the browser skips it, saving bandwidth and improving page load performance.

By splitting a large font into multiple subset files — each targeting a specific unicode-range — browsers only download the files needed for the actual text on the page. For example, if your page only uses Basic Latin characters, the browser won't download the Cyrillic or Greek subset files. This technique, used by Google Fonts and other font delivery services, dramatically reduces total font payload size. It's especially beneficial for multilingual websites where different pages need different character sets.

For most Western/Central European websites, these ranges cover the essentials:
• U+0020-007F — Basic Latin (English, basic punctuation)
• U+0080-00FF — Latin-1 Supplement (accented chars: é, ñ, ü, etc.)
• U+0100-017F — Latin Extended-A (Czech, Polish, Croatian, etc.)
• U+2000-206F — General Punctuation (dashes, quotes, ellipsis)
For Greek: U+0370-03FF. For Cyrillic (Russian, Bulgarian, Serbian): U+0400-04FF. Combining these as needed ensures your fonts load efficiently for your target audience.

Yes! CSS unicode-range supports wildcard notation using ? characters. For example, U+4?? matches all characters from U+0400 to U+04FF (the entire Cyrillic block). Each ? represents one hexadecimal digit (0-F). This is a compact way to define ranges that align with 16×, 256×, or 4096× boundaries. Our tool automatically detects when a range can be expressed as a wildcard and shows both formats.

Google Fonts serves fonts split into multiple subset files (Latin, Latin-ext, Cyrillic, Greek, etc.), each with its own unicode-range in the generated @font-face rules. When you request a Google Font, the CSS file contains separate @font-face declarations for each subset. The browser evaluates the text on your page against these ranges and only downloads the needed subset files. This is why using <link> to Google Fonts often results in multiple small downloads rather than one large font file.

If a character on the page is not covered by any unicode-range in your @font-face declarations, the browser falls back to the next font in the font-family stack. This is why it's important to either (a) cover all characters your content uses, or (b) ensure a reliable fallback font is specified. Missing characters will render in the fallback font, which may look inconsistent. Our tool helps you identify exactly which codepoints your text uses, so you never miss a character.

Yes, unicode-range is supported in all modern browsers including Chrome, Firefox, Safari, and Edge, as well as in mobile browsers on iOS and Android. Support goes back to IE9+. The feature is part of the CSS Fonts Module Level 3 specification and is considered stable and production-ready. Both the standard range format (U+0020-007F) and the wildcard format (U+4??) are universally supported.