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.
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.
