Style Variations previews on hover not properly reflecting fonts

[annezazu]

Description

The style variations previews on hover aren't properly rendering the fonts for TT2.

Step-by-step reproduction instructions

1. Open Appearance > Editor.
2. Open the Styles interface.
3. Select "browse styles"
4. Hover over the various style options and notice the previews are slightly off.

Screenshots, screen recording, code snippet

What it looks like:

style.variations.mov

What it should look like:

Specifically, the font that says “default” should be a lot thinner and delicate-looking (source serif light) and the blue option should be quite robust and round (DM sans).

Environment info

• WordPress 6.0 beta 3
• TT2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

@annezazu in testing this, the font weights are getting pulled in. I think the problem is that the actual font is not getting applied. It is just defaulting to serif, sans-serif, and monospace.

Edit:
Yup, I confirmed using Frost. The actual font is not getting pulled in. Just defaulting to browser defaults.

[annezazu]

Thanks so much for confirming and testing.

[glendaviesnz]

Have tested this and it looks like the issue is that the specified fonts are not being loaded into the preview iFrame which is why it is falling back to browser defaults.

For example, by default, in the Pink style Courier is rendered for me instead IBM Plex Mono:

but if I manually inject the Google font <links> into the preview iframe in packages/edit-site/src/components/global-styles/preview.js the correct font is rendered:

So looks like it is a matter of working out how to get the correct font loading details added to the header of those preview iframes.

[glendaviesnz]

@scruffian - this issue was mentioned in one of the comments on the PR you did to load them for the site editor . Have you looked at all at how to load them in the preview iframes?

[glendaviesnz]

@annezazu It appears that currently there is no way to access the theme.json custom font settings in the js, they are only enqueued server side. Plumbing through this detail in the global styles settings in the frontend in order to inject them into the preview iframes is probably going to be more of a 'new feature' type job, than an RC quick bug fix, so this potentially needs to be punted to 6.1. That is my view anyway, someone else may see a quick fix for it that I am overlooking.

[annezazu]

Sounds good! Thank you for digging in. Heads up @ndiego.

[ndiego]

Thanks @annezazu, this has been moved over to the 6.0.1 Project Board and we can triage from there.

[annezazu]

Somewhere along the way, this was fixed. Testing in 6.6 beta 3. Closing out:

fixed.variation.preview.mov

[justintadlock]

@annezazu - I'm still seeing this issue on WP and Gutenberg trunk. Here's an example from Twenty Twenty-Four with the Ember style variation. It uses the "Jost" font, which is not correctly applied (in typography previews or the content canvas) because the font file is never loaded:

This is easy to miss if you have Jost installed on your computer (note that its "A" character should have a pointy tip, not a flat tip, so this one is easy to spot).

Also, @getdave mentioned that this issue was not fully yet addressed and needed a ticket here: #59818 (comment)

I can open a new ticket that's more broad, but I wasn't sure if you considered this one specific to Twenty Twenty-Two or wanted to reopen. Mostly, I just don't want to lose track of this issue since both this and #59818 have been closed, which I think are the only two tickets that mention this ongoing bug.

[justintadlock]

Noting that there's an existing ticket, so no need to reopen this one: #59965