Dynamically load fonts for out-of-range characters from Google Fonts

Goal

When rendering dynamic content, especially user input, it's possible that it contains some characters which are not included in the loaded fonts.

We want to solve this problem in both Node and Edge runtimes.

Proposal

To solve this, we can make use of Google Fonts' ?text API:

https://fonts.googleapis.com/css2?family=Noto+Sans+JP&text=あ

Make sure to request this API with curl so it won't return modern formats such as woff2. This gives us a small font file that we can use as the fallback to render the dynamic content.

As for font choice, Google's Noto font family can be a good built-in fallback, which supports almost all languages in the world:

The Noto fonts are perfect for harmonious, aesthetic, and typographically correct global communication, in more than 1,000 languages and over 150 writing systems.

Implementation

Support for font-family fallback needs to be implemented first (#4).
Make satori an async API (await satori(...)) so it is able to load dynamic fonts (+Emojis). We can remove the graphemeImages option with a more user-friendly API (twemoji: true).
Satori should cache the font with a maximum fallback number of fonts (works like a LRU).
Satori should do a pre-pass to collect all the text nodes in the element. And then filter out characters that can't be rendered with specified fonts.
Satori then needs to detect which Google Font to use for a specific character. The Noto family is splitted into typefaces by language (because a opentype font can only have up to 65,535 glyphs), so some meta information (a mapping of "character → langauge & font name") of Note is needed. I can think of two ways for now:
- Access the fonts API (https://fonts.googleapis.com/css2?family=Noto+Sans+JP) in advance to collect that information. But the table will be too large.
- (Not sure if it's doable) Automatically detect/guess the language of a given grapheme based using Intl APIs.
- Use 3rd party services like https://detectlanguage.com.
- Guess the language via https://unpkg.com/guesslanguage@0.2.0/lib/guessLanguage.js, small but not accurate enough.

vercel / satori