Simple solution for the recent Chrome emoji font weight issue

Recently, with the Chrome v96 update, I've noticed that emojis on our platform changed to colorless glyphs. Frankly, that was frustrating, because we want to give a freedom in actions to our editors who create a unique content, thus it became a necessity to find a quick and valid solution for the raised problem.

Occasionaly, soon we've found that the culprit is the font-weight property. More specifically, with the Chromium update bold text makes emojis to look like a plain glyhps.

To solve the issue we need to change the font-weight of the text to normal, however we don't a have control over the portion of text inside the tag.

Hence, we need to do couple of steps:

1) Extract emojis from the text.

2) Wrap them into separate HTML tag with font-weight: normal, i.e

<span style="font-weight: normal !important">{emoji}</span>

3) replace all emojis within the text with the relative HTML tags created in step 2.

Here we done!

import emojiRegex from 'emoji-regex';

function normalizeEmojis(content) {
  const regex = emojiRegex();

  return content.replace(regex, (char) => {
    return `<span style="font-weight: normal !important;">${char}</span>`;
  });
}

After you can use the normalized HTML content inside your application.

<div
  className="font-bold text-center"
  dangerouslySetInnerHTML={{
    __html: normalizeEmojis(contentWithEmojis),
  }}
/>

Although, the parent div set to be bold, the emojis inside are colored!

Comments

[alexdoan3011]

thank you so much. This worked so well!