The latest articles on DEV Community by SYAUQIZAIDAN KHAIRAN KHALAF (@syaufy). https://dev.to/syaufy https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F324790%2F1b77bb94-f6d7-4704-bf3e-85aff0b33017.png https://dev.to/syaufy en SYAUQIZAIDAN KHAIRAN KHALAF Tue, 07 Dec 2021 12:15:58 +0000 https://dev.to/syaufy/emoji-bug-in-heading-tags-or-wherever-the-emoji-has-500-font-weight-533n https://dev.to/syaufy/emoji-bug-in-heading-tags-or-wherever-the-emoji-has-500-font-weight-533n <p>Well, well, well</p> <p>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.</p> <ul> <li><p>❎ Bugged emoji because the bold font weight 👇🏻<br> <a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhdcvutacfd7t3tvbgck.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhdcvutacfd7t3tvbgck.png" alt="Emoji bugged because the bold font weight" width="800" height="449"></a></p></li> <li><p>✅ I try to change the font-weight to 400 and it works and the emoji has a color now<br> <a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fctyfpbyssxfsn111xevr.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fctyfpbyssxfsn111xevr.png" alt="I try to change the font-weight to 400 and it works and the emoji has a color now" width="800" height="449"></a></p></li> </ul> <p><strong>But how to get emoji color without losing the tags font weight? 🤔</strong></p> <ul> <li>Well you can go use span between the emojis and make write the inline style to make the span has a 400 font weight <img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy12zqr3grmh75m4fbix1.png" alt="Well you can go use span between the emojis and make write the inline style to make the span has a 400 font weight " width="800" height="449"> </li> </ul> <p>Have you experienced it too? or is it just me experiencing it? Let me know in the comments 👇🏻</p> webdev css html