CSS Unicode Range Generator
Generate CSS unicode-range values and complete @font-face rules for Latin, Thai, and other scripts.
Loading tool...
What is CSS Unicode Range Generator?
CSS Unicode Range Generator is a free browser tool that creates unicode-range descriptors and complete @font-face rules for web fonts. Select a script preset or enter custom Unicode code point ranges, add font metadata, and copy production-ready CSS without uploading files.
Key Benefits
- Split web fonts by language or script to reduce unnecessary downloads
- Start with common Latin, Thai, Cyrillic, Greek, and Arabic Unicode blocks
- Validate custom U+ ranges before putting them into a stylesheet
- Generate consistent @font-face metadata with font-display included
- Keep font configuration private with local browser processing
Common Use Cases
- •Optimize multilingual websites with language-specific font files
- •Create Thai and Latin font subsets for faster page rendering
- •Prepare CSS for self-hosted WOFF2 or WOFF web fonts
- •Check code point ranges while configuring font subsetting pipelines
- •Document which scripts each font resource is intended to serve
How to Generate a CSS Unicode Range
- Choose a character set: Select a Latin, Thai, Cyrillic, Greek, Arabic, or Latin Extended preset from the character set menu.
- Enter font details: Provide the font family, font file URL, file format, weight, and style for the @font-face rule.
- Review the Unicode ranges: Use the preset range or choose Custom and enter comma-separated U+ ranges. Fix any invalid range warning.
- Copy or download the CSS: Copy the generated rule or download unicode-range.css, then add it to your site stylesheet.
Key Features
- Choose presets for Latin, Latin Extended, Thai, Cyrillic, Greek, and Arabic scripts.
- Enter custom comma- or space-separated Unicode ranges with validation.
- Generate a complete @font-face rule with font URL, format, weight, and style.
- Copy the generated CSS or download it as a ready-to-use stylesheet.
- Run entirely in the browser without uploading font details or text.
Frequently Asked Questions
What does CSS unicode-range do?
The unicode-range descriptor limits an @font-face rule to specific Unicode code points. Browsers can then download a font resource only when the page uses characters inside that range.
What is the format of a Unicode range?
A range starts with U+ followed by one to six hexadecimal digits, optionally followed by a hyphen and an ending code point. Multiple ranges can be separated by commas.
Can I use this for Thai fonts?
Yes. The Thai preset uses U+0E00-0E7F, the main Thai Unicode block. You can add other ranges when a font also contains Latin punctuation or additional symbols.
Does this tool upload my font or text?
No. It only generates CSS from the values you enter, and all processing happens locally in your browser.