Example of a System Font Helping a Web Font in Text Rendering on a Webpage by Browser
Web fonts have limitations. It is not possible for most webs fonts to have glyphs for all characters for consistent display on a webpage.
Let’s learn this through an experiment. → Watch Video Tutorial below.
After inspecting in Dev Tools, I found that a webpage uses Lexend font. A woman shrugging emoji is also used in the text.
The ‘Rendered Fonts’ in Dev Tools show that glyphs from two fonts are used.
One is the Lexend font which is the primary font style of the website, applied by the web designer.
The second font used to render this webpage is Segoe UI Emoji which is a system font and preinstalled on my computer.
Let me explain the process.
The browser downloaded the Lexend web font from remote server and displayed the text on webpage.
However, Lexend font file had no glyph to display the woman shrugging emoji. Therefore, browser used one glyph from Segoe UI Emoji font.
In other words, the system font helped the Lexend web font to the render the webpage.
Otherwise, a tofu or rectangular box could have replaced the emoji character.
The emoji displays well on my desktop computer due to the support from system font of Segoe UI Emoji.
However, when I opened the same page, on Android mobile phone, the emoji appeared in different font style as you can see in our demo video.
Why?
Because, on mobile phone, some different emoji font style is used instead of Segoe UI Emoji.
We can conclude that because web fonts have limited character support, so system fonts come to rescue the web font to display web pages on user screens.
Explore more articles about Fonts, or visit Home Page of Dozro website.
