Many websites are starting to use emojis as part of their UI, a missing font can cause them to be rendered as squares in Linux based OS, a problem I faced when using Hashnode.
This guide follows the How to fish approach and can be used to solve other similar problems :
-
Detect the missing font
-
Searching for and Downloading the font
-
How to install a fond in 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” system1
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 correct emojis rendering in your TuxBox 🐧
