[Bug]: Google fonts not appearing in Global Styles for some Dotcom Sites

[jeyip]

Quick summary

Google fonts appear for new atomic sites, but not for some existing ones.

Steps to reproduce

The easiest way to reproduce this is to find an existing atomic site with the site editor enabled.

1. Visit the site editor
2. Open the Global Styles panel
3. Navigate to typography settings
4. Open the font family dropdown
5. Verify that no google fonts appear ( like Roboto or Space Mono )

What you expected to happen

Google fonts should be selectable in the global styles font family dropdown

What actually happened

No google fonts appear

Context

No response

Browser

No response

Simple/Atomic

Atomic

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[jeyip]

We've discovered the root cause of the problem. More in this p2 link paYE8P-1B3-p2

[jeyip]

Leaving a reminder here to update jetpack global styles google fonts documentation if we decide to use post title and heading block typography settings in the site editor as the new way to change heading fonts globally. cc @creativecoder

[mriyazuddin]

• [ ] Reported here as well: #5416028-zd

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5416028-zen
• [ ] 5444228-zen

[sudeepbaral]

• [ ] 5444228-zen

Reported here as well. The user has installed Custom Fonts plugin and installed the font as a workaround for now.

[JoshuaGoode]

Adding tags and to the triage board.

@druesome, I believe you have some findings that might be worth sharing. Can you take a look at this one and see if we can get it to the right dev team(s)?

I think that makes https://github.com/Automattic/wp-calypso/issues/66286 a duplicate.

Related thread: p9F6qB-9Yy-p2

Unsure if this is in @Automattic/serenity's area or not. Unsure if @Automattic/cylon got to this and if it's more of an FSE thing.

[jamiepalatnik]

📌 SCRUBBING

• Tested on AT ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

• Tested on AT site, can recreate.

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[Addison-Stavlo]

Unsure if https://github.com/orgs/Automattic/teams/cylon for to this and if it's more of an FSE thing.

Yes, Cylon added the google fonts module to .com. There was an issue where users with Blockbase (and child) themes that had previously set fonts via the customizer were not able to see the Google Fonts list in global styles - switching to a new theme or deleting the global styles settings was the work around.

I thought this was resolved with the new version of Blockbase though, for those still experiencing the issue does this still seem to be only on Blockbase and child themes? cc @pbking @jeyip

[druesome]

I thought this was resolved with the new version of Blockbase though, for those still experiencing the issue does this still seem to be only on Blockbase and child themes?

@Addison-Stavlo I looked a bit into this one in the past, and usually manually changing the value of the Global Style post (ie wp_global_styles_meraki) to {"version": 2, "isGlobalStylesUserThemeJSON": true } fixes it. A summary of my findings can be found in #65115. However, I found that the workaround no longer works for the Meraki theme either.

More recently, this issue came up with the Payton theme (a Blockbase Premium child theme) as well (see #66286), but the workaround does not also help as the Global Style immediately gets overwritten after refreshing the editor.

This seems to work okay in Blank Canvas.

[Addison-Stavlo]

but the workaround does not also help as the Global Style immediately gets overwritten after refreshing the editor.

I think the new Blockbase version added some logic to migrate fonts settings from customizer settings to the current global styles format, which could be what is overwriting things. But it also sounds like it isn't doing that correctly since the google fonts aren't showing up.

Adding the issue to the theme board as well for more visibility here (or maybe I will when Github stops being dumb, have had this issue before recently). cc @jeffikus @pbking

[pbking]

This seems to be an issue with Payton because it's still got fontFamilies defined in the theme.json file. I thought I had removed all of those when I upgraded the premium version of Blockbase but I seem to have missed that one. It looks like it was subsequently tweaked, but the settings remain so the fonts expressed in theme.json are all that are available.

Blockbase has the collection of Google Fonts within the theme and there's a conflict with Jetpack (this was to comply with the GDPR ruling on Google Fonts which Blockbase previously used natively prior to Jetpack's implementation). So to have all of the fonts available the child them has to leave the fontFamilies value empty so that the specific configuration including all of the fonts in the parent Blockbase can be used.

The issue is the same with Videomaker, but the unfortunate situation of that theme being in the /pub repo while being a /premium theme has created difficulties in keeping those two themes (videomaker, videomaker-white) synced up.

Here's a change that should address both of those themes.

D85999-code

[Addison-Stavlo]

Thanks @pbking! It sounds like there is also currently an issue with Merkari as well?

A summary of my findings can be found in https://github.com/Automattic/wp-calypso/issues/65115. However, I found that the workaround no longer works for the Meraki theme either.

[blackjackkent]

Serenity has had a couple of issues drift into our queue already (https://github.com/Automattic/wp-calypso/issues/66008, https://github.com/Automattic/wp-calypso/issues/66286) that seem like they might be related to this?

[pbking]

Yes, pretty sure the change above will fix both items you noted @blackjackkent .

I'm sure I updated Meraki as well but I must have lost those changes at some point. You're correct, the same change is needed in Meraki. Here is a change to address that one.

[pbking]

I have deployed D85999-code and #6405

I believe this can be closed now.

[Robertght]

No further reports for a while. Closing.

cc @pbking @jeyip