Google Fonts' CSS is lying about its WOFF2 files: How can I know that in runtime/while rendering?

184 views Asked by At

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)

  1. Is there any JavaScript/CSS API we can use to know when a character is rendered by a fallback font?
  2. 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>

0

There are 0 answers