DEV Community

Cover image for Emoji Bug in Heading Tags or Wherever The Emoji Has 500+ Font Weight 🤔
SYAUQIZAIDAN KHAIRAN KHALAF
SYAUQIZAIDAN KHAIRAN KHALAF

Posted on

Emoji Bug in Heading Tags or Wherever The Emoji Has 500+ Font Weight 🤔

Well, well, well

Have you realized it? This started 2/3 weeks ago when I created a landing page for my app. I noticed that the emoji on my landing page suddenly turned black and white. I searched for a solution for several hours and realized that the emojis in the [p] tags are still the same but the heading [h1], [h2], [h3] tags and tags that have a font-weight class that has a value of 500 and above will create emojis are black and white.

  • ❎ Bugged emoji because the bold font weight 👇🏻
    Emoji bugged because the bold font weight

  • ✅ I try to change the font-weight to 400 and it works and the emoji has a color now
    I try to change the font-weight to 400 and it works and the emoji has a color now

But how to get emoji color without losing the tags font weight? 🤔

  • Well you can go use span between the emojis and make write the inline style to make the span has a 400 font weight Well you can go use span between the emojis and make write the inline style to make the span has a 400 font weight

Have you experienced it too? or is it just me experiencing it? Let me know in the comments 👇🏻

Discussion (3)

Collapse
inhuofficial profile image
InHuOfficial • Edited on

I searched for a solution for several hours

Well I doubt that! If you search for "emoji outline bug chrome" you would have got your answer straight away 😉❤

Collapse
syaufy profile image
SYAUQIZAIDAN KHAIRAN KHALAF Author

Well, thanks mate ✨

Collapse
inhuofficial profile image
InHuOfficial

In all seriousness though it is great that you are offering solutions for this as it is an annoying bug!

I hope this helps some people in the short term until Chrome finally decides to fix it (and I really hope they fix it and don't decide "it's a feature" 🤣)