Emoji is rendered without color when its font weight is set to "bold" [closed]

Question

With normal font-weight, text with emoji is displayed without any problem:

But after you set font-weight to bold, the emoji will lose its color:

The problem exists in Chrome on Windows (10 and 11), but not in Firefox on Windows or Safari on iOS / macOS.

The problem seems to be introduced by some very recent Chrome / Windows update, likely in November 2021.

Hbomb

Maybe a bug. Works in Edge. – Sienkiewicz

Issue was how windows was handling the emoji font in Chrome. Dirty solution was "font-weight:500" instead of "font-weight:bold" no sense editing original question to post as a self-answer - not much info provided on why question required "details or clarity" - simply were no other details to provide 🤷‍♂️ – Hbomb

The fix for me was to change the font weight to 400 just for the emoji <span style="font-weight: 400;">👍</span> – Aviculture

Looks like this bug was introduced with KB5007262 on Windows 11 because I installed it this morning and now have the same issue. On the support page it says: "Updates all emoji from the Segoe UI Emoji font to the Fluent 2D emoji style" support.microsoft.com/en-us/topic/… – Minda

It seems to be a bug with Chrome/Chromium, see: bugs.chromium.org/p/chromium/issues/detail?id=1266022 . Btw, Edge on my PC also has this problem. But Firefox is fine. – Radically

Answer 1

I had the same issue when I created a website on wordpress, using the page builder "Elementor".

When I tried to upload an SVG file, all views in the other SVG files on the same page lost quality. That happened because all the SVG files used the same class name in the document that the page builder "Elementor" builded.

To resolve this issue, I had to change the ID when I closed all the SVG files, Because I had embedded inline styles when I closed them.

That the answer that I got from the support of the "Elementor" plugin:

"I have tried importing some of the SVG files you provided, and it looks like this is happening because you have inline styles in your SVG files and they're using the same class name, "cls-1". This class name is used by most of your SVG files which causes a conflict when they're placed on the same page. If you designed these icons with Illustrator, please try to assign a unique ID. You can also manually edit these SVG files and change the class name to a unique one."

So, try to change the class name to a unique ID, and clear cache on your browser.

Staging

This was related to the system's default emoji font, not SVG images. Solution posted as a comment above since my question was closed for "needs details or clarity" subject and question provided all the details we had 😐 – Hbomb