Change default fontDisplay:fallback

Resolved

(@mmwbadmin)

Hello,

I’m using WP 6.7.1 with a child theme of TT5. Added Oswald font, visible in theme.json of child.

"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "400",
							
							"src": ["/wp-content/uploads/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvgURoZAaRliE.woff2"],
							"fontDisplay": "swap"
						}
					],
					"fontFamily": "Oswald, sans-serif",
					"name": "Oswald",
					"slug": "oswald"

I added “fontDisplay”: “swap”, but with no effect. In page source it reads:

<style class="wp-local-fonts">
@font-face{font-family:Oswald;font-style:normal;font-weight:400;font-display:fallback;src:url('https://..../wp-content/uploads/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvgURoZAaRliE.woff2') format('woff2');}
</style>

font-display keeps default value “fallback”

Do I need to change something else somewhere else?

Any help greatly appreciated

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter mmwbadmin
(@mmwbadmin)

1 year, 4 months ago

Fixed it by saving just the fonts with the Create Block Theme plugin.

Font filename is back to normal : “oswald-normal-400.woff2” and if I change the fontDisplay setting in theme.json it has effect.

Carolina Nymark
(@poena)

1 year, 4 months ago

Hi
Can you walk me through how you first added the font? To exclude bugs.
By the name of the original font file, it looks like you installed it via the font library?
And then you must have retrieved the name somehow?

If you install a font via the font library, the global styles are saved to the database, and then styles and settings are not read from theme.json. WordPress looks at the database first. If that’s the case, your change to theme.json had no effect. Then when you saved the changes with the plugin, it reset the styles in the DB.
Thread Starter mmwbadmin
(@mmwbadmin)

1 year, 4 months ago
Hi Carolina,

Preparing to switch from a classic theme to TT5 I used the CBT plugin to create a child theme on a separate install (dev). I kind of redesigned/rebuilt my site and added the Oswald font to the theme library. Once done I exported the child theme, again with CBT.

I then installed the child theme (.zip file) and TT5 on my production install and made some final adjustments.

The font was working fine. But Webpagetest, through their “Opportunities & Experiments”, suggested to use “swap” on font loading instead of “fallback”. I found the font filename in theme.json and added “fontDisplay”: “swap”, but with no effect (see above).

Reading about fonts and fontFace related to FSE and theme.json version 3 I got confused about
- the location of the font files: /uploads/fonts/ or /themes/theme/assets/fonts/
- and tried to discover how the parameters in theme.json were ‘translated’ to a CSS rule.
Looking in the Font Library again I saw 2 fonts installed. “Oswald normal” under Theme and “Oswald normal 400” under Custom (???). Probably I installed the font twice without noticing.

I removed the custom one and decided to make a backup before using CBT again to just save the fonts.

Now fontDisplay can be managed through theme.json.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Change default fontDisplay:fallback’ is closed to new replies.