css - How do browsers deal with "Tofu" characters

Question

character. I am using the Orbitron font in a hybrid Cordova/Android app that I am creating - quite simply because it is compact and has the clean, futuristic look that I am after. However, I realized not so long ago that Orbitron is a rather limited font with support for little more than the basic latin character set.

I was about to embark on a switch to the Noto * family of fonts that have been created by Google so there is No more Tofu - tofu beign the term used by typographers to describe the blank rectangular box that appears when a font does not have a suitable glyph to display.

Incorporating the Noto Sans, Noto Sans Naksh (Arabic) and Noto Sans CJK (Far Eastern) font families in my app would add to to its size so I decided to do an experiment first in Chrome on Windows (for a while now the WebView used by Android in its hybrid apps is derived from Chrome so the test is fairly representiative.

My test markup is shown below. Even with Orbitron being specified as the default important font Chrome does a perfectly good job of showing the text for "Hello World!" in Spanish (Orbitron does not have the Spanish inverted exclamation mark), Arabic, Simplified Chinese, Japanese & Tamil (all not present in Orbitron).

*{font-family:orbitron !important;}

<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">

<div id='english'>Hellá</div>
<div id='spanish'>?Hola Mundo!</div>
<div id='arabic'>????? ???????!</div>
<div id='sch'>你好，世界！</div>
<div id='jp'>こんにちは世界！</div>
<div id='tamil'>??????? ?????!</div>

Answer 1

In Chrome you can inspect the element, then switch into the "Computed" tab and it will show the Rendered Fonts. Chrome (and I think most modern browsers) will use the font for all characters that are supported, and will silently use a local font to display the remaining characters.

E.g. for Japanese it will use "Yu Gothic" for 5 glyphs and "SimSun" for 3 glyphs.

For Tamil it uses 2 glyphs from "Orbitron" (the space and the exclamation mark) and the remaining 12 are rendered in "Nirmala UI":

For Spanish it only renders "Orbitron", I'm not sure why, but I guess it basically uses the existing exclamation mark and rotates it.

Which local font file is used can vary based on Browser and OS.