[2.x] Support font sets for Google Fonts CSS files

[davepagurek]

Increasing access

Using a custom font takes a lot of effort when you have to find a font, download it, and re-upload it to the web editor. Google Fonts and similar services offer ways to use web fonts with pretty great UX for HTML pages. Ideally, users can load fonts into p5 with the same developer UX as this.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

The CSS files generally contain multiple font face declarations, for various font styles (e.g. regular, italic) and for various character sets. For example, open this one: https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

We currently support these in 2.0 for 2D mode, since we add all the font faces from the CSS to the page, and we use the browser's own text rendering. There is the chance that these are not all available on frame 1 even after awaiting loading the font, as the browser doesn't actually download the font files until the page has characters that need them.

To support textToPoints, in #7693 we initially considered eagerly loading all the font files and parsing them. We are currently opting not to do this as it may be a lot of data to download and keep in memory. We currently have a sets option you can pass in to fuzzy match what character sets you prefer, and it will try to load a single font face from the CSS file that best matches. However, it's very plausible that you will want data from multiple of these.

One option is to create a kind of multi-font class that contains multiple sub-fonts and delegates implementations to the underlying fonts depending on the character in question. But to do this, we'd have to think of a way to not fetch too much upfront. Maybe using a similar fuzzy match system, but allowing it to match multiple font faces? Maybe having properties for each sub font that you can await individually?

[davepagurek]

For context on the size, we did a little measurement in #7693 (comment) to see how much the download would be for all character sets. Note that this is also the compressed size; it will be larger in memory.

[dhowe]

I'm thinking that loadFont should prob continue to return a single font. While there are interesting cases for the fontset idea for sure, we'd likely want to make the user specifically ask for multiple fonts if/as desired, since this could, depending on the impl, break sketches and/or crash browsers. Could be an addon or maybe(?) something like loadFonts or loadFontSet, with the caller then having full control over which fonts are included in the set.

A related question is whether there are other cases to think about here beyond google fonts. I'm hesitant (perhaps this is my own bias) to implement features, at least in the core, that depend on non-standard corporate-specific offerings both on principle and bc they are apt to change without notice