Update for WordPress 6.5 fonts

[JohnRDOrazio]

WordPress 6.5 has finally enabled handling fonts and installing fonts from Google WebFonts. This means, we can now avoid all the messy font pickers we created in the BibleGet plugin to allow installation and usage of Google Fonts. In order to do this, we need to detect whether the new fonts functionality is present. Is there an easy way of detecting support for this? Or would we have to simply check against the minimum supported WordPress version?

[JohnRDOrazio]

This is basically all handled through global styles in Full Site Editing. I believe single blocks can register their own styles, that can then be handled through the Full Site Editor

[JohnRDOrazio]

Currently handling this in the oop-dev branch.

[JohnRDOrazio]

See for reference:

• https://developer.wordpress.org/reference/functions/register_block_style/
• https://gutenberghub.com/how-to-add-block-styles-in-wordpress-a-step-by-step-guide/#google_vignette
• https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/

[JohnRDOrazio]

This would also mean detecting whether the current theme supports Full Site Editing. If it does, we won't implement the custom Font selector; if it doesn't, we will implement the custom Font selector.

[JohnRDOrazio]

Perhaps this can help: Discussion: Identifying themes with support for full site editing

[JohnRDOrazio]

So we have succeeded in retrieving an actual .woff2 file rather than .ttf files, which cuts the size of the font files practically in half.

Now we just need to take care of the font loading issue. Rather than load a css file that declares all of the possible font faces (resulting in over a thousand requests for local resources that are therefore blocked by the browser) we should implement the CSS Font Loading API, loading only those fonts that are actually in view in the dropdown list. This will mean knowing which fonts are currently in view in the dropdown, and loading a discreet number of font resources beyond that limit (before and after).

The next best thing would be to generate images from the fonts, and perhaps combine them into a single image file, and then display the portions of the image using coordinates.

The absolute best would be to implement the new WordPress Font Library (which I believe will only be available for themes with Full Site Editing capabilities?), and only fall back to the more tedious implementation when a classic theme is in use.

[JohnRDOrazio]

I believe it should be possible to detect whether a theme is a block theme (support FSE) using the WP_Theme class (you can get the WP_Theme object of the current theme by calling wp_get_theme() without any parameters):

https://developer.wordpress.org/reference/classes/wp_theme/is_block_theme/