Uploaded Fonts Are Not Reflected in Editor Canvas Immediately

[okmttdhr]

Description

After uploading and activating new fonts through the Font Library modal in Gutenberg, changes are not immediately reflected in the editor's canvas. Specifically, when a new font is applied to a block, the canvas continues to display the default font until the browser tab is refreshed. It might be related to #58764.

Expected Behavior:
After a font is uploaded, activated, and applied to an element in Gutenberg, the canvas should immediately reflect this change without requiring a page refresh.

Actual Behavior:
The canvas does not update to show the newly applied font until after the browser tab where Gutenberg is open is refreshed.

Step-by-step reproduction instructions

1. Download the "Super Enjoy" font from https://www.dafont.com/super-enjoy.font.
2. Upload and activate the font in the Font Library modal.
3. Apply the newly activated font to a heading block in the Gutenberg editor.
4. Observe that the canvas does not update to show the new font; it continues to display the text in the default font.
5. Refresh the browser tab.
6. After refreshing, observe that the canvas now correctly displays the heading in the "Super Enjoy" font.

Screenshots, screen recording, code snippet

Screen.Recording.2024-02-07.at.15.44.17.mov

Environment info

Gutenberg > 17.6

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

Yes

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

No

[arthur791004]

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\";

[juanfra]

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

Screen.Recording.2024-02-08.at.17.39.48.mov

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.

Screen.Recording.2024-02-08.at.17.02.23.mov

[richtabor]

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

[matiasbenedetto]

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.

[pbking]

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

[okmttdhr]

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

[juanfra]

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).

[getdave]

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

[matiasbenedetto]

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