CSS Color Dingbats

Before emoji, there were dingbats. In the CSS Color Emoji, you may see some of the glyphs render in black-and-white. These are the old dingbats and sometimes font stacks render them before the color emoji fonts are used. This is especially true for macOS and linux. For iOS and Windows, rendering seems to default to color and everything works correctly. It can vary depending on your font stack, the browser, and the OS and it’s only a few characters that are affected. In most cases this is fine and you’ll never notice.

But if the monochrome dingbats are an issue, make a subset of the color emoji font stack and put it first so the default dingbats aren’t used. To do this, a unicode-range property is added to restrict the color emoji to a dingbat heavy section. If this restriction is not added, the browser uses odd spacing and letters. Here’s the CSS and a codepen demonstrating this.

// color dingbats for macOS and linux
@font-face {
  font-family: "color-dingbat";
  src: local("Apple Color Emoji"),
       local("Segoe UI Emoji"), 
       local("Segoe UI Symbol"),
       local("Noto Color Emoji");
  unicode-range: U+2000-2c00;
}

// and add to front
body {
  font-family: color-dingbat, your-font, sans-serif, color-emoji;
  // or just before the default font.  Depends on the font.
  font-family: your-font, color-dingbat, sans-serif, color-emoji;
}