DEV Community

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

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

GrahamTheDev on November 20, 2021

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 Headin...
Collapse
 
denniscodes profile image
Dennis Mwangi • 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;

Enter fullscreen mode Exit fullscreen mode


``
and call it Like this on any component

``

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

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


``

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
robertegj profile image
Robert G

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 😀

Collapse
 
grahamthedev profile image
GrahamTheDev

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!

Collapse
 
natalia_asteria profile image
Natalia Asteria • Edited

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

Or maybe it's just my font configs.

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
leob profile image
leob

Nice find, cool trick!

Collapse
 
ksengine profile image
Kavindu Santhusa • Edited

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

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
eichgi profile image
Hiram

One Chrome to rule them all?
Nah...

Collapse
 
grahamthedev profile image
GrahamTheDev

💍

👁
🗼

Collapse
 
rotem_cohen_ddcec6b5ff1ee profile image
rotem cohen • Edited

I see the same thing on Microsoft Edge.

Collapse
 
lewisisisisisisiisiss profile image
Lewis • Edited

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

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
vinijill profile image
Vin

Thank you... It worked beautifully! Not sure whats up with the new update and I've been cracking my head over this issue...

Collapse
 
ksengine profile image
Kavindu Santhusa

The version of chrome???

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
mirelaprifti profile image
Mirela Prifti

What a cool trick! Thanks!

Collapse
 
grahamthedev profile image
GrahamTheDev

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

 
grahamthedev profile image
GrahamTheDev

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.

Collapse
 
flexwhale profile image
🚀🚀🚀flexWhale

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