CTO and co-founder of Signal Sciences. Author and speaker on software engineering, devops, and security.

CSS Color Emoji Stack

How to build a cross-platform color emoji stack. Even on Linux.

As part of a solid cross-platform system stack is emoji rendering. As mentioned in CSS System Fonts for Linux 2018, Ubuntu 18.04 and Fedora 28 gain color emoji support. While most platforms now render emoji by default, the results are often inconsistent. Most emoji will be in color, but perhaps not the system emoji, and some emoji by default will render in monochrome versions. To help resolve these issues, color emoji fonts must be explicitly added to make them render correctly. They can be added directly to the relevant font-family property, but another way is making a new font-face. Then they can be added to any existing font stack with minimal cut and paste. Below shows both:

// define a new font face that just deals with emoji
@font-face {
  font-family: "color-emoji";
  src: local("Apple Color Emoji"),
       local("Segoe UI Emoji"), 
       local("Segoe UI Symbol"),
       local("Noto Color Emoji");
}
// add it *after* the serif, sans-serif or monospace
// ending default.
body {
  font-family: your-font, sans-serif, color-emoji;
}
// the other way is explicitly adding them
body {
  font-family: your-font, sans-serif,
     apple color emoji, segoe ui emoji,
     segoe ui symbol, noto color emoji;
}

It’s probable that on the latest browsers using the latest OS for macOS, iOS and Windows, this isn’t needed. However, I’m not going to back-test the numerous historical combinations. As mentioned in CSS System Font Stack Sans Serif v3 GitHub and Bootstrap add these to their stacks, so it’s likely it’s needed somewhere. The results can be in seen in the following codepen. On some platforms, some emoji are still in black and white. These dingbats need to handled specially.

webdev

© 2018 Nick Galbreath