Input characters or Unicode ranges to auto-generate @font-face unicode-range declarations
Zero Dependencies Β· Works Offlineπ Input Characters or Unicode Ranges
π Preset Character Sets
What Can the CSS unicode-range Generator Do?
The CSS unicode-range Generator is a free online tool that automatically generates unicode-range declarations for @font-face rules based on input characters or Unicode code point ranges. It supports direct character input, Unicode code points, code point ranges, and preset character sets. Automatically merges adjacent ranges and generates optimized CSS code. All computation runs locally in your browser β no data is ever uploaded to a server.
Core Features
- Multiple Input Formats: Direct character input, Unicode code points (U+XXXX), code point ranges (U+XXXX-YYYY), with automatic format detection
- Preset Character Sets: Built-in ASCII, Latin Extended, CJK GB2312, Japanese Kana, Korean, Arabic, and more
- Smart Merging: Automatically detects and merges adjacent or overlapping Unicode ranges to reduce declaration count
- Complete Code Generation: One-click generation of full @font-face CSS code with unicode-range
- Character Preview: Visual display of characters in each range to confirm coverage
How to Use
1. Enter characters, Unicode code points, or ranges in the input box, or click preset character sets to add quickly.
2. Select input mode (auto-detect/characters/code points) and whether to merge adjacent ranges.
3. Click "Generate unicode-range" or let it auto-generate as you type.
4. View the generated unicode-range declaration and complete @font-face code.
5. Copy the result to your CSS file, or download as a CSS file.
Use Cases
Case 1: Web Font Optimization
Split large font files into subsets by unicode-range. Browsers only download the font fragments actually needed for the page, dramatically reducing load time.
Case 2: Multilingual Websites
Specify different font subsets for different language regions β Chinese pages only load CJK ranges, English pages only load Latin ranges.
Case 3: Icon Fonts
Specify precise Unicode ranges for icon fonts to avoid conflicts with normal text fonts and ensure icons display correctly.
Case 4: Font Fallback Strategy
Use unicode-range to precisely control which characters use which fonts, achieving optimal font pairing for mixed CJK-Latin text.
Technical Background
The unicode-range descriptor was introduced in CSS Fonts Module Level 3 and is supported by all modern browsers. Its value is a comma-separated list of Unicode ranges, each being a single code point (U+4E00), a range (U+4E00-9FFF), or a wildcard (U+4E??). When rendering text, browsers check each character's code point against @font-face unicode-range values and only trigger font download when matched. This mechanism enables on-demand font subset loading, which is especially important for CJK and other large character set fonts β a complete Chinese font often exceeds 10MB, while a subset of the 6000 most common characters may be only 2-3MB.
β FAQ
What is unicode-range?
A CSS @font-face descriptor specifying which Unicode characters a font supports. Browsers use it to decide when to download that font.
Why use unicode-range?
It lets browsers only download needed font subsets, reducing network transfer. CJK fonts are 10MB+; unicode-range loads only the relevant fragment.
What input formats are supported?
Direct characters, Unicode code points (U+4E00), code point ranges (U+4E00-9FFF), and preset character sets.
Is data uploaded to a server?
No. Pure frontend technology β all computation runs in your browser. Data never leaves your device.
How does range merging work?
The tool auto-detects adjacent or overlapping Unicode ranges and merges them into continuous intervals, reducing declarations.
What preset character sets are available?
ASCII Latin, Latin Extended, Cyrillic, Greek, CJK GB2312, Japanese Kana, Korean Hangul, Arabic, Thai, digits, punctuation, emoji, and more.