Search code examples
fontsfont-faceemojitypography

How are emojis rendered?


From what I understand, a font, or font-family, may not have all the glyphs defined for every Unicode character. Whenever I have an emoji character, what is the font-family in effect?

For example, if I have:

<p style="font-family:Arial">&#x1f354; Hamburger</p>

from which typeface is the hamburger emoji taken?

The reason I am asking is, on my desktop Chrome, emojis are relatively plain and ugly, whereas on my Android Chrome, the same emojis have lots more details and colors. As a web page creator, can I control or select what "fonts" are used to render emojis in a client?


Solution

  • Depending on the app or site/service, emoji might be displayed using

    • bitmap image files, like .pngs
    • SVG files
    • colour fonts

    Colour fonts are commonly used because emoji are represented as text, and a font is the most direct way of displaying text.

    If you tell a browser to display text using Arial but the text contains emoji characters, then those characters are not supported by the Arial font and the browser will select a different font. There are far more characters defined in Unicode than a single font like Arial can support, and browsers will have font fallback logic to select from among a number of different fonts depending on the characters to be displayed. As for which font a browser would use as a fallback for emoji, that might depend on the browser, but also on the host OS environment: apps typically use fonts included in the host OS for fallback, but could also bundle their own fonts.

    Windows provides Segoe UI Emoji as an emoji font; Apple's OSes provide the Apple Color Emoji font; Google provides Noto Color Emoji.

    There are different colour font formats, and current versions of the above emoji fonts each use a different format. You can use this site with different browsers to see which of the colour formats is supported.

    If you want to control what fonts are used to display emojis, then don't simply specific a single family like Arial that doesn't support any emoji. Otherwise, you're leaving it up to the browser and host environment. Find an emoji font you like and get a license to use it as a web font; then get it served up as a web font and referenced appropriately in your site using @font-face; and then add that web font into your font-family chain.