CSS font-variant-emoji Property

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

.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
Edge Chrome Firefox Opera Safari
xxxxx
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
xxxxxx

Last updated by CSSPortal on: 23rd September 2023