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

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 https://github.com/processing/p5.js/pull/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?

Start by reading PR #7693 and the existing 2D font-loading and textToPoints behavior, especially how the sets option selects a font face. Compare that flow with the linked Google Fonts CSS example; done means defining and testing a bounded way to support characters across multiple font sets without eagerly fetching every font file.