DEV Community

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

Posted on • Updated on

🤷‍♂️ 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 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?

UPDATE

Thanks to @lewisisisisisisiisiss I can now report it appears to be a bug so expect it to be patched (pretty soon looking at the conversation).

https://bugs.chromium.org/p/chromium/issues/detail?id=1266022

Discussion (26)

Collapse
lukeshiru profile image
LUKESHIRU

Is one of those things that I like but I still believe should be opt-in, because folks don't like changes likes this.

Collapse
inhuofficial profile image
InHuOfficial Author

Yeah it is one I am still getting used to.

From a selfish perspective I want colourful emojis back on DEV as they make articles stand out in the feed 🤣

Collapse
sowg profile image
Sowjanya

Oh, so this is what happened

Collapse
inhuofficial profile image
InHuOfficial Author

Yup, it is what happened…still waiting on someone telling me the “why” it happened 🤣

Collapse
sowg profile image
Sowjanya

Also this applies for edge as well, there also emojis are lines

Thread Thread
inhuofficial profile image
InHuOfficial Author

I would imagine anything powered by Chromium is affected then so Vivaldi etc etc. Nice spot! ❤️

Thread Thread
filix profile image
Filip Ilić

Can confirm Vivaldi on Fedora is not affected.

Thread Thread
sowg profile image
Sowjanya

Its for windows only

Collapse
sowg profile image
Sowjanya

Maybe they thought it would be easy for developers to color there emojis? Ana Tudor uses emojis in her tab bars. Just a guess, who knows it might be right

Collapse
leob profile image
leob

Nice find, cool trick!

Collapse
nefofortressia profile image
Nefo Fortressia • Edited on

Weird, I'm using ungoogled-chromium on Arch Linux but I didn't see it.

Or maybe it's just my font configs.

Collapse
inhuofficial profile image
InHuOfficial Author

It was conjecture as to whether it was all chromium based browsers as it affected Edge as well. It could be a Windows thing with Windows 11 rolling out, who knows!

I cannot find any change log info on why this has happened so far, waiting for someone to find it so I can dig into the why part!

What will be really interesting is to see if this does get applied to other OS's or if it is a Windows only update!

Collapse
filix profile image
Filip Ilić

This would be expected addition to windows update nightmares. We are still dealing with "printer nightmare update".

Collapse
ksengine profile image
Kavindu Santhusa • Edited on

Chrome says that we should use custom emojis.(joke🤣)

Here a great article from antfu,
antfu.me/posts/icons-in-pure-css

Collapse
inhuofficial profile image
InHuOfficial Author

Chrome says that we should use custom emojis.

Do you have a source for that from Chrome themselves? All of the options in the article have either accessibility or performance trade offs so I would be surprised if Google says that.

Collapse
ksengine profile image
Kavindu Santhusa

No no, Just a joke.

Thread Thread
inhuofficial profile image
InHuOfficial Author

Oh hahaha I am such an idiot, so hard to get sarcasm in written text! 🤣

Collapse
lewisisisisisisiisiss profile image
Lewis • Edited on

This looks to be a bug based on this bug report, only affecting windows.

bugs.chromium.org/p/chromium/issue...

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks, included it in the article, nice find as I couldn't find any info!

Collapse
ksengine profile image
Kavindu Santhusa

The version of chrome???

Collapse
inhuofficial profile image
InHuOfficial Author

96.0.4664.45 currently. Appears to be Windows only from what I can gather.

Collapse
sharpninja profile image
The Sharp Ninja

I like it. I don't beilieve text should dictate it's own color.

Collapse
mirelaprifti profile image
Mirela Prifti

What a cool trick! Thanks!

Collapse
eichgi profile image
Hiram

One Chrome to rule them all?
Nah...

Collapse
inhuofficial profile image
InHuOfficial Author

💍

👁
🗼

Collapse
flexwhale profile image
🚀🚀🚀flexWhale

Solution:
font-weight: initial;
for emoji container.