🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪

Recently I noticed something a little different in Chrome, all emojis are now outlines only (and the same colour as text) if they are within Headings.

I am not sure why this has happened, I can’t seem to find anything about it and it certainly isn’t a…

Recently I noticed something a little different in Chrome, all emojis are now outlines only (and the same colour as text) if they are within Headings.

I am not sure why this has happened, I can’t seem to find anything about it and it certainly isn’t an accessibility improvement (if that is what they were thinking)!

Either way, here is a quick look at what they have done if you haven’t seen it yet, or use a different browser!

Google Chrome on left with simplified emojis in a single colour, Firefox on Right with coloured emojis

It also appears that the emojis honour the text colour, which is one good thing (assuming the text colour has enough contrast that is!)

emoji outline colour in chrome is same as text



The workaround

If you make the font-weight very low then Chrome will show the original emojis.

emojis in chrome are normal again if text weight is light

So for now a quick workaround if you want normal emojis to show on your site would be to wrap the emojis in a <span> with a very low font-weight and everything will look normal again.



Example



Screenshot of example

Just in case your can’t see what I am on about here is a screenshot of the above example using Chrome on Windows:

Content is same as above codepen



What do you think?

I kind of like the new outline only emojis, but they don’t work everywhere.

What are your thoughts on it and can anyone actually find the change log item that explains it?


Print Share Comment Cite Upload Translate
APA
InHuOfficial | Sciencx (2024-03-29T13:26:17+00:00) » 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪. Retrieved from https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/.
MLA
" » 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪." InHuOfficial | Sciencx - Saturday November 20, 2021, https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/
HARVARD
InHuOfficial | Sciencx Saturday November 20, 2021 » 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪., viewed 2024-03-29T13:26:17+00:00,<https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/>
VANCOUVER
InHuOfficial | Sciencx - » 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪. [Internet]. [Accessed 2024-03-29T13:26:17+00:00]. Available from: https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/
CHICAGO
" » 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪." InHuOfficial | Sciencx - Accessed 2024-03-29T13:26:17+00:00. https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/
IEEE
" » 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪." InHuOfficial | Sciencx [Online]. Available: https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/. [Accessed: 2024-03-29T13:26:17+00:00]
rf:citation
» 🤷‍♂️ Chrome just changed emojis to outlines in headings? 🤷‍♂️ I have a fix for your site! 💪 | InHuOfficial | Sciencx | https://www.scien.cx/2021/11/20/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-chrome-just-changed-emojis-to-outlines-in-headings-%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-i-have-a-fix-for-your-site-%f0%9f%92%aa/ | 2024-03-29T13:26:17+00:00
https://github.com/addpipe/simple-recorderjs-demo