Host SVG image previews and JSON collection data for Google Fonts listed in the Font Library

[mmaattiiaass]

In the new Font Library that will be introduced in WordPress 6.4, we display a list of Google fonts. For performance reasons, instead of loading the full font assets to create the font previews, we are rendering a custom pre-generated SVG image with the preview. We would need to host those images somewhere. It would be useful to host that in wporg CDN.

The SVG previews are currently hosted on this repo:https://github.com/WordPress/google-fonts-to-wordpress-collection specifically in the /output/preview folder.

We would need to host them to access them from the frontend of the Font Library, you can try that in action on this Playground link: ​https://shorturl.at/alpHP

This is the PR where this is being implemented: ​https://github.com/WordPress/gutenberg/pull/54566

In summary:

What?
Host on wpoorg CDN, maintaining the same folders tree, the SVG files from /output/preview of the repo mentioned.

Why?
To load font previews fast in the new WordPress Font Library.

[tobifjellner]

Ehm. What about localization?

1. I hope that someone using a language with non-Latin script will have possibility to filter for fonts that support the target script. (But that would be off-topic for this meta ticket, though.)
2. Meta side: Would we have a way to pre-generate previews that use the relevant script? So on a site that uses Russian, the preview would show some Cyrillic text? (Perhaps alongside some Latin text...)

[Clorith]

Curious, but by hosting these, and loading them from WordPress.org, are we not just shifting the tracking concern off Google's services and onto WordPress' services instead?

There's a warning that you are allowing access between Google Fonts and your site, but not dotorg.

There are some gray areas that allow for update systems etc, but this isn't an update system, so I think we need to be aware of that as well, the emoji thing is already contentious in some privacy-oriented areas, and if this is another thing that gets blocked, how will users get previews?

[azaozz]

re we not just shifting the tracking concern off Google's services and onto WordPress' services instead?

Yes, it may look that way, but this is only for logged-in users that have capability to install fonts. This type of users (site admins) do access w.org sometimes, for example when viewing the About screen, when looking at plugins or themes to install, etc. And yes, this is the way emoji images work too.

I don't think loading the font preview images deviate from the existing use cases. This more or less matches how plugins and themes are installed, and w.org is accessed to get the info/images for them, and to download the zips.

if this is another thing that gets blocked, how will users get previews?

I think that if this gets blocked the users will simply not get previews. Seems they will have to preview the fonts somewhere else, download the files and install "manually". Whether that would respect their privacy better is another question...

[jeffikus]

Update: This PR is now merged ​https://github.com/WordPress/gutenberg/pull/54566

Please can you proceed and commit the SVG image files that you can find in this path - ​https://github.com/WordPress/google-fonts-to-wordpress-collection/tree/main/output/previews - to the .org CDN?

Version this with 16.7 to match the GB release in the url. Please maintain the folder structure within - /font-slug/filename.svg

In addition, please add the google-fonts-with-previews.json file - ​https://raw.githubusercontent.com/WordPress/google-fonts-to-wordpress-collection/main/output/google-fonts-with-previews.json - to the CDN, using the same versioning as the svg image files, this can be found in the /output/ folder.

The main repo for the files is found at ​https://github.com/WordPress/google-fonts-to-wordpress-collection/

This needs to be completed by the WP 6.4 Beta 1 release on Tuesday as this is being done alongside the Font Library trac ticket here ​https://core.trac.wordpress.org/ticket/59166

[jeffikus]

If we need to update any of the SVG files or the json file, should we use versioning to match WP core instead of the GB version numbers?

[paulkevan]

These have been added with the following examples to give the structure:

​https://s.w.org/images/fonts/16.7/collections/google-fonts.json
​https://s.w.org/images/fonts/16.7/previews/abeezee/abeezee-400-italic.svg

[ironprogrammer]

Updated title to include hosting of default collection data JSON.

[mikachan]

There have been some recent changes in the ​Google fonts collection repo, which means there are updated versions of the SVG previews now available. Please could these be uploaded to the .org CDN, similar to the above request?

Please upload the SVG previews in this directory: ​https://github.com/WordPress/google-fonts-to-wordpress-collection/tree/main/releases/gutenberg-17.6/previews

The version of these new files is in line with Gutenberg 17.6, so please reference this version in the URL, e.g. ​https://s.w.org/images/fonts/17.6/previews/abeezee/abeezee-400-italic.svg

(We do also have an updated google-fonts-with-previews.json file, but it's not quite ready for upload.)

Thank you!

[paulkevan]

Updated font collection have been deployed.

[mikachan]

Updated font collection have been deployed.

Thank you!

We've now finished making the latest changes to the JSON files as well, and we've also added some more SVG previews. Could we please request for the preview files to be updated again (we haven't deleted any, only added), and for the JSON files to be uploaded?

We've updated the structure of the repo on GitHub to more closely match the wp.org CDN. Please upload the following:

• ​https://github.com/WordPress/google-fonts-to-wordpress-collection/tree/main/releases/gutenberg-17.6/previews => ​https://s.w.org/images/fonts/17.6/previews
• ​https://github.com/WordPress/google-fonts-to-wordpress-collection/tree/main/releases/gutenberg-17.6/collections => ​https://s.w.org/images/fonts/17.6/collections

Thanks!

[paulkevan]

we've also added some more SVG previews.

Is there a diff or PR that can be referenced for these, since it's a large amount of files and not that easy to scan to make sure it's correct.

[mikachan]

Yes, this PR covers the changes: ​https://github.com/WordPress/google-fonts-to-wordpress-collection/pull/13

[paulkevan]

the changes have now been deployed.

going to close this ticket for now, with any future changes happening in another ticket.

[mikachan]

Thank you!

[mmaattiiaass]

The repo holding the data and assets has been updated for the next Gutenberg 17.7 version: ​https://github.com/WordPress/google-fonts-to-wordpress-collection/tree/main/releases/gutenberg-17.7

Could we have those assets uploaded to the CDN, please?

[paulkevan]

The repo holding the data and assets has been updated for the next Gutenberg 17.7 version: >​https://github.com/WordPress/google-fonts-to-wordpress-collection/tree/main/releases/gutenberg->17.7
Could we have those assets uploaded to the CDN, please?

We need a better system than uploading on each Gutenberg release - ideally once per stable release of WP, otherwise this becomes too burdensome.

going to close this ticket for now, with any future changes happening in another ticket.

Please make sure future requests go in new tickets as they will get overlooked.

[mmaattiiaass]

We need a better system than uploading on each Gutenberg release - ideally once per stable release of WP, otherwise this becomes too burdensome.

I agree; I think the frequent changes are due to the fact that the font library has been actively developed in the last few months. In the future, it should be different.

Please make sure future requests go in new tickets as they will get overlooked.

Good to know, thanks for pointing that out.

[mmaattiiaass]

I submitted the new ticket: https://meta.trac.wordpress.org/ticket/7441#ticket