GrahamTheDev

Posted on Nov 20, 2021 • Edited on Nov 23, 2021

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

#discuss #webdev #css #codepen

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!

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

The workaround

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

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:

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

Top comments (25)

Dennis Mwangi • Dec 17 '21 • Edited

Best practices for using Emojis in your react app
You can create an Emoji.jsx component

import React from 'react';
const Emoji = props => (
    <span
        className="emoji"
        role="img"
        aria-label={props.label ? props.label : ""}
        aria-hidden={props.label ? "false" : "true"}
        style={{ fontWeight: "100", fontFamily: "Emojione, Noto, Twemoji, Symbola"}}
    >
        {props.symbol}
    </span>
);
export default Emoji;

``
and call it Like this on any component

import Emoji from '../Emoji/Emoji';

<Emoji symbol="🚶🏿‍♂️" label="man" role="img"/>

GrahamTheDev • Nov 20 '21

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 🤣

Robert G • Dec 11 '21

Here's what's happening:

A change has been made so that emojis with a non-standard font-weight show an outline with that used as the line thickness.
The H1 tag by default has higher-than-usual font-weight, which is why this will work for some people.

For me, I noticed I was impacted by this issue, was not using H1 but P with a thick font-weight. Removing the custom font-weight restored the emojis color 😀

GrahamTheDev • Dec 11 '21

Have a look through the thread I linked under the "update" section, quite interesting what the root cause of the bug actually is and what triggers it!

Looks like they do plan on patching it but last time I checked there was no date for a fix suggested!

Natalia Asteria • Nov 23 '21 • Edited

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

Or maybe it's just my font configs.

GrahamTheDev • Nov 23 '21

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!

Filip Ilić • Nov 25 '21

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

leob • Nov 20 '21

Nice find, cool trick!

Kavindu Santhusa • Nov 21 '21 • Edited

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

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

GrahamTheDev • Nov 21 '21

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.