It seems that the loadFontFaceInBrowser function loads the font family with the incorrect font family name, especially for formatFontFamily.

Here is the font we added to the document right after the installation:

Note that the screenshot is from the value of Array.from($0.contentDocument.fonts) ($0: the iframe element) in the console.

However, it should be "Super Enjoy" instead of \"Super Enjoy\"

For example, if you make changes to styles manually after the installation, it works as expected.

- --wp--preset--font-family--super-enjoy: "Super Enjoy";
+ --wp--preset--font-family--super-enjoy: \"Super Enjoy\";

I tested this one and can replicate it. It happens when the name of the uploaded font has a space (two or more words).

This is because the loadFontFaceInBrowser is using the formatFontFamily method intending to format the name, and that's when the extra quotes are added.

Unless I'm missing something, removing the use of formatFontFamily here will make it. I've done a quick test, and the fix seems to be working fine.

Is this related to how theme style variations that define font families don't have fonts loaded, unless you refresh?

Is this related to how theme style variations that define font families don't have fonts loaded, unless you refresh?

I don't think so, it seems like there is a problem with how the font names are rendered to CSS.

Strange that I was unable to reproduce this with the suggested (or any) font.

It appears that some fonts are problematic and others are not, regardless of whether they were uploaded by hand or not. The following Google Font also caused the problem, for example.

• Bungee Shade
• Akaya Kanadaka
• ADLaM Display
• Abril Fatface

From what I checked, the problem with installing multi-word fonts from Google happens in Google Chrome, because it needs to receive the literal name when adding the font to the browser. It wasn't happening on Firefox, for example.

I've updated the PR to cover both cases, and also to add the font to the browser (document and iframe) so that the font styles are reflected everywhere (also in the sidebar, when you install a Google font and see the font in the fonts list).

I moved this to "In Progress" because @juanfra's PR seems to be addressing this issue.

I reported this in trac to add the fixes into core repo https://core.trac.wordpress.org/ticket/60541#ticket