Create Block Theme plugin - Fonts stopped working on child theme

[mikeicode]

Quick summary

We build many sites for customers (BBE) and used the Create Block Theme plugin on AT sites to create simple child themes. Looking back at previous builds, we've noticed that the fonts are now not displaying correctly. Because of this, we have stopped using this plugin, as it leads to a serious visual issue and will likely result in support requests and increased workload for our team to debug and resolve.

Steps to reproduce

I'm not sure how easy it would be to reproduce this issue, because it's possible that if you create a child theme now, it might work fine. However, themes we previously created are now not working, possibly due to a Gutenberg update. Example below from this project. pdEkSe-5s5-p2

What you expected to happen

Correct fonts, this is how the site looked when we completed it.

What actually happened

How it currently looks.

That is not Roboto:

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

No response

Logs or notes

The theme used to create the child theme was Twenty Twenty-Three

[dsas]

@Automattic/pixel do you have any insight here?

[mikachan]

I've tried to reproduce this by creating a child theme of TT3 using Create Block Theme and adding the Google font Candal to the theme. It seems to work fine on my local site - I'm able to select and set Candal on various blocks.

Could you provide an example child theme with the font issue? Or maybe provide the steps followed to create the child themes with the custom fonts?

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO
I had a theme created with Create Block Theme on a local site that used a custom font (Rubik) and I was able to reproduce something similar. Here's the process I used:

1. Created a blank theme on the local site
2. Customized and added custom fonts. Screenshot of the Manage Theme Fonts section:

3. Export the theme
   longstoryshort.zip

4. Installed theme on https://wp64broke.blog/ (Atomic)

Result:

Text originally set to be displayed using Rubik displays on a default sans serif font

📌 ACTIONS

• Triaged, moving to Blocker due to the impact on multiple BBE sites and builder workflow

📌 Message to Author
@mikeicode please share more information about your workflow so Sarah and folks from Pixel can investigate further, as it might be different than the flow I used to reproduce.

@mikachan do you need us to move this to an upstream issue on https://github.com/WordPress/create-block-theme?

cc @arthur791004 in case it has anything to do with the changes to implement the Font Library on WordPress.com

[mikeicode]

@mikachan The site from this issue is https://abhisreport.com, this is a live site so we can't make changes to it for troubleshooting. This is one example of multiple sites where we're seeing the issue.

[pbking]

Do you know how the fonts that were selected were installed? The font family in question are poppins and roboto, two fonts offered by Jetpack's Fonts. This might be related to those fonts.

@arthur791004?

[creativecoder]

I see the issue (or at least part of the issue). In the exported longstoryshort.zip, the src of the Rubik font is "http://newtheme.local/wp-content/fonts/rubik_normal_900.ttf"

• This is the wrong domain for the new site
• The font files aren't moved into /wp-content/fonts/ as part of installing the theme

[mikeicode]

@pbking

Do you know how the fonts that were selected were installed?

We (Built By Express) only use fonts which are available to us in the editor, so it does make sense that they would be from Jetpack.

[mikachan]

I see the issue (or at least part of the issue). In the exported longstoryshort.zip, the src of the Rubik font is "http://newtheme.local/wp-content/fonts/rubik_normal_900.ttf"

Just confirming that I could reproduce this locally by creating a child theme using Create Block Theme with a custom font ("Candal"). Here's my exported zip: tt3child.zip See #85036 (comment) below for updated test results.

[jffng]

@mikeicode could you share a few more examples of sites that were working previously but now broke?

I see the issue (or at least part of the issue). In the exported longstoryshort.zip, the src of the Rubik font is "http://newtheme.local/wp-content/fonts/rubik_normal_900.ttf"

Just confirming that I could reproduce this locally by creating a child theme using Create Block Theme with a custom font ("Candal").

I actually think this might be a different issue. From the original issue description:

themes we previously created are now not working

If this were caused by the CBT bug, those custom fonts would not have worked in the first place.

On the site that @mikeicode shared (https://abhisreport.com/), there are no @font-face declarations being printed to the front end, that I can see. I'll continue looking into this.

[mikachan]

I actually think this might be a different issue. From the original issue description:

Yes, apologies, the local site I was using for testing was in a funny state, in that I've been testing lots of different custom fonts with likely many different Gutenberg branches, and my test result wasn't very reliable. I'm sorry for the confusion 🙈

I've just been testing the above issue (a child theme created via Create Block Theme) again on a local site in a clean state. I'm using the latest version of Create Block Theme (1.13.7) and I'm on Gutenberg trunk (last merge was WordPress/gutenberg#56948). Here are the steps I followed:

1. Create child theme using CBT plugin (I've tested using TT4, TT3, and Adventurer)
2. Install and activate new child theme by uploading the .zip export under Appearance -> Add New Theme
3. Go to CBT -> Manage Theme Fonts and add new font (this time I tested with "ABeeZee")
4. Went to the Editor, used the CBT menu (via the spanner icon) and exported a new .zip file
5. The resulting theme.json in this .zip file included the following definition for ABeeZee:

	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "ABeeZee",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/abeezee_normal_400.ttf"
							]
						}
					],
					"fontFamily": "ABeeZee",
					"slug": "abeezee"
				}
			]
		}
	}

I believe this is the expected result, as the src is referencing the file: path. The font file was also exported successfully in assets/fonts in the .zip. (Edit: Here's an example .zip from my testing: tt3again.zip)

Also to confirm from my previous comment at #85036 (comment), I believe the src URL, which referenced my local site URL, was added via the Font Library in Gutenberg. So this is completely separate to this issue.

Looking at longstoryshort.zip, I'm wondering why these fonts added via Create Block Theme are not referencing the file: path. I also notice this isn't a child theme. @liviopv, could you confirm the version of both Create Block Theme and Gutenberg you were using? Thanks 🙏

[mikeicode]

@jffng

could you share a few more examples of sites that were working previously but now broke?

Here are a few examples, see the missing Jost body text in each site.

• https://austinmariani.com
• https://claddaghresources.wpcomstaging.com
• https://married-s.com

[AbhiTheWizard]

Hello @mikeicode, thank you so much for helping me develop my website Abhisreport.com. I'd love to take your help for trying to fix this issue. Again, thank you so much!!

[mikeicode]

@AbhiTheWizard I went ahead and changed the font on your site to a different sans serif font, DM Sans, which is working correctly.

Details for internal use. pdEkSe-5s5-p2#comment-3087

[github-actions]

Support References

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

• pdEkSe-5s5-p2#comment-3087

[pbking]

I see that in the theme in question the Jost font is installed in a way that looks like this in the theme.json:

				{
					"fontFace": {
						"jost-100-900-italic": {
							"fontDisplay": "fallback",
							"fontFamily": "Jost",
							"fontStyle": "italic",
							"fontWeight": "100 900",
							"origin": "gutenberg_wp_fonts_api",
							"provider": "jetpack-google-fonts"
						},
						"jost-100-900-normal": {
							"fontDisplay": "fallback",
							"fontFamily": "Jost",
							"fontStyle": "normal",
							"fontWeight": "100 900",
							"origin": "gutenberg_wp_fonts_api",
							"provider": "jetpack-google-fonts"
						}
					},
					"fontFamily": "Jost",
					"name": "Jost",
					"slug": "jost"
				},

What has happened is that the font selected for use in the theme.json, made with the site editor and exported (either with CBT or not) results in the Jost font family referenced in the way that Jetpack provided fonts.

My suggestion when building sites is to avoid using the Jetpack Font Provider. Until the Font Library is complete, managing fonts exclusively with Create Block Theme would avoid this issue.

To address the issue with the themes any fonts with the provider "jetpack-google-fonts" should be deleted from the theme.json file. Then the fonts needed (that were previously referenced from Jetpack's font installation) can be re-installed (either by adding the assets manually and updating the theme.json or with CBT).

[mikeicode]

@pbking Can you explain this further:

My suggestion when building sites is to avoid using the Jetpack Font Provider. Until the Font Library is complete, managing fonts exclusively with Create Block Theme would avoid this issue.

We use Global Styles to select fonts:

Then we used the Create Block Theme plugin to quickly create a child theme which we could then use on another site.

Are you saying that we currently cannot select fonts using that method if we plan to use the plugin to create a child theme?

[fushar]

I've raised a fix via: Automattic/jetpack#35029.

It is not reproducible when we create a child theme right now because the deprecated jetpack-google-fonts provider (as explained by @pbking above) has already been ignored by the latest Jetpack update. If the child theme was created before the update, it might have this issue.

If we want to fix it right now without waiting for the fix above to be released, we can re-export the child theme. Check the theme.json, make sure that it does not contain jetpack-google-fonts. Then reupload it on customer sites.

cc: @Automattic/lego

[fushar]

The fix was just deployed yesterday.

@mikeicode , could you double check? I checked a few sites mentioned in this ticket, and they seem to show the correct fonts now 😄

@liviopv -- feel free to close this issue after we've verified the fix (not sure what's the process here).

Thanks all!

[mikeicode]

@fushar I pinged you in Slack, thanks!

[mikeicode]

Appears to be resolved, thanks!