How to fix Hashnode (or any other webpage) fonts rendering on Linux

Hello Hashnoders ,

A new member of the family here ! In my first blog I'll share how to fix the first problem I faced right after signing in to Hashnode : some characters (emojis) showing as squares on Linux (Mx Linux here),

This guide follows the How to fish approach and can be used to solve other similar problems :

1. Detect the missing font

2. Searching for and Downloading the font

3. Installing a new font to Linux

1- Detect the missing font

To find which fonts the web page is using (or at least trying to use) we'll use Web Developers best friend : DevTools !
RightClick on the text > Inspect Element (this will differ slightly between browers , here's a look from Vivaldi 4.0)

In the styles pane filter for font-family , The font-family property can hold several font names as a "fallback" system¹

But, which of these is actually being rendered ?
To find that switch to the Computed pane (make sure the right html tag is still selected in the Elements pane) and scroll down until you see Rendered fonts

We can see that two fonts are involved: Inter from Network resource with 16 glyphs (characters) But I'm mainly interested in the Ubuntu font since it's a Local file and with 1 glyph that fits with 1 square , let's do the count (for fun)

I assume this is an emoji , Looking back at the font-family list we'll be installing "Noto Color Emoji" it's a font by google that we can find and install relatively easy on Linux .

Searching for and Downloading the font

Since we went with Noto this step is as easy as Googling (in my case duckducking) the font name and opening the first result page : https://www.google.com/get/noto/. Don't be tempted to Download the whole package it's over 1GB ! instead you can scroll down and look for "Noto Color Emoji"

Installing a new font to Linux :

Extract NotoColorEmoji-unhinted.zip you'll find three files , we'll need NotoColorEmoji.ttf , copy it.
Next, go to your home directory make sure Show Hidden files is enabled in your File manager (usually View > Hidden files) and look for .fonts folder, if you can't find it Create it ! (don't forget the dot before the folder name which means it's a hidden folder)

Past NotoColorEmoji.ttf inside it , and we're DONE ! , Restart your browser and enjoy Hashnode (and DevTo) emojis rendering correctly in your TuxBox 🐧

Conclusion

I hope you found this useful , what I really need from you now is a feed-back , what could've be done better , was it too long , was it too short , would it be okay if I used terminal ? can't wait to hear from you 😁
I'll be writing more Linux ,Python , Web Development guides in the future make sure to check them out 🔥 My twitter