Skip to main content
🎨 CSS3 / Web Fonts Standard: W3C CSS Syntax Level 3 / CSS Fonts Level 4 Time: 5 min read Reviewed: September 2024

Unicode in CSS: Escapes, unicode-range & Fonts

Insert special symbols in CSS pseudo-elements using backslash-hex escapes, define @font-face unicode-range subsets, and handle font fallback.

TL;DR — Direct Answer

Direct Technical Answer

In CSS content: "..." properties, Unicode characters are escaped using a backslash followed by 1 to 6 hexadecimal digits representing the code point. If the character is immediately followed by a hex letter (a-f) or digit, you must either write a full 6-digit hex code or place a trailing space delimiter after the escape.

💡
Production Rule: Use \2713 or \002713 for checkmark ✓; remember that a space immediately following a CSS hex escape acts as a delimiter and is consumed by the parser.

Common CSS Unicode Symbol Escapes

Ready-to-use CSS backslash-hex escapes for frequently used UI icons.

Check Mark
Multiplication X
Right Arrow
Bullet
Black Star

CSS pseudo-element Unicode escaping and trailing space delimiters

CSS unicode-css.css 
/* 1. Basic CSS Unicode hex escapes */
.btn-check::before {
  content: "\2713 "; /* \2713 (✓) + space delimiter */
  color: #16a34a;
}

.btn-arrow::after {
  content: "\2192";  /* → (Right Arrow) */
  margin-left: 0.5rem;
}

/* 2. Using unicode-range in @font-face to optimize web font downloading */
@font-face {
  font-family: 'SymbolFont';
  src: url('/fonts/symbols.woff2') format('woff2');
  unicode-range: U+2190-21FF, U+2700-27BF; /* Arrows & Dingbats only */
}
Program Output 
/* Rendered pseudo-elements display ✓ and → */

Common Mistakes vs Production Patterns

Learn which patterns fail in production and the modern standards-compliant alternatives.

Handling Trailing Hex Letters in CSS Escapes

Escapes followed immediately by a-f or numbers.
AVOID: ❌ Ambiguous hex digits without delimiter 
/* Want checkmark (2713) followed by letter 'e' */
.item::before {
  content: "\2713e"; /* Parsed as 5-digit hex \2713e! */
}
Why it fails: CSS parser consumes up to 6 hex digits, misinterpreting the letter "e" as part of the code point number.
RECOMMENDED: ✅ Trailing space delimiter or 6-digit padding 
/* Option A: Use space delimiter (space is consumed) */
content: "\2713 e";
/* Option B: Pad to full 6 digits */
content: "\002713e";
Why it's better: Unambiguously terminates the hexadecimal sequence.
Source: W3C CSS Syntax Module Level 3 §4.3.7

Edge Cases & Invariants Matrix

A diverse cross-character test matrix comparing character behavior across ASCII, combining marks, emojis, flags, and surrogate fragments.

Test Case Input Glyph Code Units Code Points Graphemes Category Technical Explanation
Supplementary Plane Emojis in CSS 🔥 (U+1F525) — — — Standard Requires 5 hex digits (\1F525). Valid in CSS without surrogate pairs.

Standards & Source Provenance

All technical invariants, APIs, and behaviors in this guide are verified against official primary specifications.

W3C

CSS Syntax Module Level 3

Clause: §4.3.7 Consume an escaped code point

Read Specification →
W3C

CSS Fonts Module Level 4

Clause: §4.5 Character range: the unicode-range descriptor

Read Specification →