Custom fonts are not loaded correctly in block themes

[ryelle]

In #868, I added code to register google fonts loaded in the "Appearance > Fonts" setting into the editor using the Fonts API. Something must have changed from gutenberg 16.6 to 16.7, because they aren't loaded correctly anymore. The Fonts API was experimental to begin with, and it has seen activity in this cycle, so it likely just needs to be updated to use the current API.

To reproduce

View us.wordcamp.org/2023/.

Or to reproduce yourself:

1. Use a block theme like Twenty Twenty-Three
2. Add some google fonts to the Appearance > Fonts page
3. Create a page and add a block that supports font styles (eg, heading, paragraph)
4. Enable the font family controls in Typography
5. Only the core fonts appear

Expected behavior

The fonts that were added in Appearance > Fonts should be in this list, so that they can be used in the editor.

Screenshots

Gutenberg 16.6, working	Gutenberg 16.7, not working

[iandunn]

I'm seeing these locally:

> wp site list --network_id=2
Deprecated: Function wp_fonts is <strong>deprecated</strong> since version Gutenberg 16.3 with no alternative available. in wp-includes/functions.php on line 5463

Deprecated: Function WP_Fonts::__construct is <strong>deprecated</strong> since version Gutenberg 16.3.0 with no alternative available. in wp-includes/functions.php on line 5463

Deprecated: Function WP_Fonts::register_provider is <strong>deprecated</strong> since version Gutenberg 16.3.0 with no alternative available. in wp--includes/functions.php on line 5463

WordPress/gutenberg#52485 seems to be the cause, but I haven't looked closely.

[wpzaragoza]

Sorry to bother this channel, but do you know if there is an estimated date when this issue can be fixed?

I have to publish the WordCamp website next week, and I'm going to have to switch to Twenty Twenty-One and redesign again.

[nukaga]

I have received reports of this problem from both WordCamp Kansai 2024 and WordCamp Asia 2024.

[candy02058912]

WordCamp Taiwan 2023 had the same issue, but the event has already ended so it's not urgent.

[StevenDufresne]

@candy02058912 Apologies for not getting this fixed in time. :(

I'm looking at this right now and will update this ticket appropriately.

[StevenDufresne]

For the time being, as @dd32 has suggested, we'll manually add fonts until we can define the fonts folder.

If you want to use a Google Font, open an issue with the fonts you want to be added.

An example ticket should look like:

---

Can you add the following fonts for use on https://us.wordcamp/2023?

Fonts:

@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..900;1,200..900');

[ryelle]

Looks like a PR to make the font upload settings filterable will be available in GB 17.6: WordPress/gutenberg#57697

[dd32]

Worth noting that the pre-filterable implementation of the fonts didn't properly support Multisite (which WordCamp is) so it could've been a good thing that it didn't work out of the box..

[timbouchard]

Can you add the following font for use on https://buffalo.wordcamp.org/2024/?

(if we can use a github hosted font):
@import url('https://github.com/timbouchard/wcbuf24/raw/master/fonts/OffBit-Bold.woff2');

(if it has to be a google font):
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

[dd32]

(if it has to be a google font):
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

In the meantime, If you only need to use it in Custom/Remote CSS, you can use the Custom Fonts section to add it; https://buffalo.wordcamp.org/2024/wp-admin/themes.php?page=wc-fonts-options

It won't be available in the Editor though.

[timbouchard]

Thanks! Got it working. Appreciate it.