CSS font-variant-emoji Property

The font-variant-emoji property controls how user agents choose and present emoji glyphs and emoji-capable fonts for characters in the text stream. It influences whether characters that have both text and emoji presentations are rendered using the color/graphical emoji glyphs provided by emoji-capable fonts or with the text-style glyphs from a standard text font, and it can affect how multi-codepoint emoji sequences (such as those using zero‑width joiners) are resolved to a single unified glyph. In practice this property lets authors express a preference for emoji-style rendering versus text-style rendering without changing the underlying character data; the engine still follows Unicode presentation selectors and font matching rules but takes the declared preference into account when picking a glyph.

This preference works together with font selection and fallback: the engine will consider the declared emoji preference when matching available fonts in the cascade and when deciding whether to substitute a color emoji font from the system or a text font from the page. For consistent results you typically pair the emoji preference with an explicit font stack so that emoji-capable fonts are available when desired; see font-family for how font selection influences which glyphs are used. Because emoji presentation often relies on specialized formats (color bitmap/bitmap-with-vector-outline, COLR/CPAL, or SVG-in-OpenType), the property is effectively a hint to the renderer about choosing those fonts and glyphs rather than an instruction that directly changes glyph outlines.

The way the property interacts with other typographic features is complementary: it does not replace OpenType feature control or other font-level settings but can change which font and glyph set those features apply to. For fine-grained typographic control you would still use mechanisms such as font-feature-settings and the broader family of font-variant controls like font-variant to adjust ligatures, numeric styles, and similar features after the emoji-capable font has been selected. In other words, font-variant-emoji helps determine the visual style and source font for emoji characters, and then the renderer applies the usual font shaping and OpenType feature pipeline to those chosen glyphs when applicable.

In practical terms, authors use this property to get consistent visual behavior across platforms (for example, to prefer monochrome text-style glyphs for inline emoji in a dense typographic layout, or to prefer color emoji for expressive messaging). Considerations include layout and metrics — because emoji glyphs can have different metrics than text glyphs, switching presentation can affect line-height, alignment, and line-breaking — and accessibility: choosing text-style presentation in contexts where emoji could be confusing to assistive technologies may help, but you should still ensure semantic meaning is conveyed in text. Finally, because user agents implement emoji rendering using different font formats and composition rules, it’s important to test your chosen presentation in representative environments and with common multi-codepoint emoji sequences (ZWJ sequences, skin-tone modifiers, variation selectors) to confirm the intended result.