Context
I'm working on an app that needs to dynamically analyze and apply fonts from Google Fonts. Part of that consists of reading the unicode-range CSS property to: first, get to know which characters a given font includes (this is the actual pain point/lie); second, render those characters with that font.
The Problem
A given unicode-range might list code points that are not included/covered with glyphs by its respective WOFF2 files.
I did realize that by a) visually testing it: characters will render with a given fallback font (usually serif if there's no fallback); or b) by requesting a font specifying included but actually missing characters as the text value on its URL: in such a case Google Fonts use to return CSS with broken WOFF2 URLs.
The Question(s)
- Is there any JavaScript/CSS API we can use to know when a character is rendered by a fallback font?
- Is Google Fonts automating its CSS building process in such a way that
unicode-range(s) are likely to always include some missing code points?
Example
For the sake of simplicity I'm not going to bring here all the code I came up with to automate the following process because it's out of scope.
Roboto includes the following characters on its cyrillic-ext subset:
Ԕ ԕ Ԗ ԗ Ԙ ԙ Ԛ ԛ Ԝ ԝ Ԟ ԟ Ԡ ԡ
Ԣ ԣ Ԥ ԥ Ԧ ԧ Ԩ ԩ Ԫ ԫ Ԭ ԭ Ԯ ԯ
Here we have those characters (actually not) rendering with Roboto:
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
.fallback--serif {
font-family: Roboto, serif;
}
.fallback--sans-serif {
font-family: Roboto, sans-serif;
}
.fallback--monospace {
font-family: Roboto, monospace;
}
<p class="fallback--serif">
<code>serif</code> fallback<br/> Ԕ ԕ Ԗ ԗ Ԙ ԙ Ԛ ԛ Ԝ ԝ Ԟ ԟ Ԡ ԡ<br/> Ԣ ԣ Ԥ ԥ Ԧ ԧ Ԩ ԩ Ԫ ԫ Ԭ ԭ Ԯ ԯ
</p>
<p class="fallback--sans-serif">
<code>sans-serif</code> fallback<br/> Ԕ ԕ Ԗ ԗ Ԙ ԙ Ԛ ԛ Ԝ ԝ Ԟ ԟ Ԡ ԡ<br/> Ԣ ԣ Ԥ ԥ Ԧ ԧ Ԩ ԩ Ԫ ԫ Ԭ ԭ Ԯ ԯ
</p>
<p class="fallback--monospace">
<code>monospace</code> fallback<br/> Ԕ ԕ Ԗ ԗ Ԙ ԙ Ԛ ԛ Ԝ ԝ Ԟ ԟ Ԡ ԡ<br/> Ԣ ԣ Ԥ ԥ Ԧ ԧ Ԩ ԩ Ԫ ԫ Ԭ ԭ Ԯ ԯ
</p>