CSS font-variant-emoji Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-variant-emoji CSS property is used to control the rendering of emoji characters within text. It allows web developers to specify how emoji should be displayed, with options such as enabling or disabling emoji presentation, selecting a text or emoji style for the characters, and controlling their size. This property is particularly useful for ensuring consistent and customizable emoji styling in web content, providing greater control over the appearance of emojis to match the overall design of a webpage.

Initial value: normal
Applies to: all elements and text. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.fontVariantEmoji

Syntax

font-variant-emoji: normal | text | emoji | unicode

Values

normalAllows a browser to choose how to display the emoji. This often follows the operating system setting.
textRenders the emoji as if it were using the unicode text variation selector (U+FE0E).
emojiRenders the emoji as if it were using the unicode emoji variation selector (U+FE0F).
unicodeRenders the emoji in accordance with the Emoji presentation properties. If the U+FE0E or U+FE0F variation selector is present, then it will override this value setting.

Example

CSS

.text-presentation {
  font-variant-emoji: text;
}

.emoji-presentation {
  font-variant-emoji: emoji;
}

Browser Support

The following table will show you the current browser support for the CSS font-variant-emoji property.

Desktop

x	x	x	x	x

Tablets / Mobile

x	x	x	x	x	x

Last updated by CSSPortal on: 31st December 2023

Support Us