CSS Color Emoji Stack
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.