Font Library: Prefer downloading WOFF instead of TTF font files

[aristath]

What?

Issue reported on WP's Slack by @luminuu:

when using the Font Library in the Gutenberg plugin, the fonts downloaded are TTF files

Why?

.ttf is an antiquated format, much larger in size than .woff or .woff2 and also of lower quality, supporting far fewer features available in modern fonts.

How?

Added a user-agent to our wp_remote_get call. Previously, there was no user-agent set so the default WP one was used. The user-agent selected here will download .woff files, so that we can still support some older browsers.
Looking at the browser supports for woff2 on caniuse.com I think we can switch to woff2 instead of woff, but I'm not 100% certain so I added a comment explaining why this particular user-agent was selected, and which one to use if we want to use woff2.

[luminuu]

Thank you for looking into this, @aristath! I've tested this manually but it would always get me TTF files.

I've looked through the source code, and the $default_font_collection has this source included: https://s.w.org/images/fonts/16.7/collections/google-fonts-with-preview.json

It looks like a list of all Google Fonts, with a downloadFromUrl property which always links to .ttf files. Google Fonts wants you to use an API key to fetch data from their service, so I guess that's why there's a file on WordPress servers so every user doesn't have to use their own API key. Here's the API documentation for Google Fonts: https://developers.google.com/fonts/docs/developer_api?apix_params=%7B%22capability%22%3A%5B%22WOFF2%22%5D%2C%22family%22%3A%5B%22Noto%20Sans%22%5D%2C%22subset%22%3A%22latin-ext%22%7D
The capability dropdown only allows for none/capability_unspecified, WOFF2 and VF (variable fonts).

I've tested this with Noto Sans. In the file from w.org, Noto Sans has the ID 888. I've downloaded the TTF file from the downloadFromUrl property separately and it has the exact same file size as the one installed via the font library, which is 556 KB. Downloading the WOFF2 file from Google Fonts directly gives me a file size of 196 KB on my machine.

I think to make WOFF2 work, folks at Automattic need to update the Google Fonts file to include WOFF2 files and prefer delivering these over TTF. Pinging @matiasbenedetto, @mikachan, @annezazu and @richtabor for visibility.

I'd also like to hear some input from the @WordPress/performance team on this.

For reference, here's the issue I've found that exists already: #55049

[aristath]

Ah that makes sense... Thank you so much for digging deeper into this @luminuu!
I hadn't noticed that's where fonts come from, I assumed we were just getting them from Google - in which case the above patch would work.
Looks like we'll need to do this change on w.org instead.
I looked at the meta repo and could not find anything related to this, so I'm assuming it's something that runs behind the scenes and is not part of the repos

[swissspidy]

I think to make WOFF2 work, folks at Automattic need to update the Google Fonts file to include WOFF2 files and prefer delivering these over TTF.

It would be best for the file on the CDN to contain links for all the available formats, TTF, WOFF, WOFF2. Then the consumer can pick whatever they prefer. There could be a filter for example.

Looking at the browser supports for woff2 on caniuse.com I think we can switch to woff2 instead of woff, but I'm not 100% certain so I added a comment explaining why this particular user-agent was selected

We should match compat data with the browserslist config to see what is possible. Ideally we'd use WOFF2 directly. I don't see why it shouldn't be possible at first glance.

[aristath]

I think I found the code that generates that data...
We should be able to pass a user-agent on https://github.com/WordPress/google-fonts-to-wordpress-collection/blob/abe0da82028cbd99bfcf8577cd8a88e8c863f7d4/src/get_google_fonts.js#L80 and this way get the woff/woff2 files 🤔

[aristath]

Created issue on WordPress/google-fonts-to-wordpress-collection#1 👍

[luminuu]

Since this has been fixed upstream now and I assume it will be added to Gutenberg 17.6, is there anything left to do on this repository here to make the changes in the upstream repository work? @mikachan @matiasbenedetto

[mikachan]

We still need to update the URL of the default font collection in Gutenberg, but that will be handled in a separate PR to this. I believe we can close this PR in favour of WordPress/google-fonts-to-wordpress-collection#3 being merged. Thanks for checking!

[matiasbenedetto]

This PR updates the google-fonts-with-previews.json file to include the link to the woff2 files( added by WordPress/google-fonts-to-wordpress-collection#3 ) and the link to the previews that still need to be uploaded to the wordpress.org CDN.

is there anything left to do on this repository here to make the changes in the upstream repository work?

We still need to update the URL of the default font collection in Gutenberg, but that will be handled in a separate PR

Exactly, we need to consume the new data: In this in-progress PR, I updated the URL of the new font collection data, among other changes.

[aristath]

Closing this PR since its code is irrelevant. Discussions can continue on the other issues and PRs 👍