What?

Load/Unload the font face in browser when toggling the variants.

Why?

Referring to “Changes in font-weight are not immediately reflected on the canvas, requiring a page reload for updates to be visible.”, we have to load/unload the specified font face in the browser when the user is managing the fonts.

How?

Call the loadFontFaceInBrowser when the user is enabling a font-variant. When the user is disabling a font-variant, call the unloadFontFaceInBrowser instead.

Note that Font faces that were added to the set using the CSS font-face rule remain connected to the corresponding CSS, and cannot be deleted.

Testing Instructions

• Go to the Site Editor
• Open the Font Library Modal by Styles > Typography > Fonts
• Install the “ABeeZee” fonts from the “Install Fonts” tab
• Create the following paragraph:
  • ABeeZee Regular. Set the Font Family to ABeeZee, and the Appearance to “Regular”
  • ABeeZee Regular Italic. Set the Font Family to ABeeZee, and the Appearance to “Regular Italic”
• Make sure the fonts are displayed correctly
• Open the Font Library Modal again to turn off the font variants of ABeeZee
• Save and refresh the page
• Open the Font Library Modal again
• Toggle the font variants of ABeeZee, and make sure the fonts are still displayed correctly

Testing Instructions for Keyboard

Screenshots or screencast

load-font-variants-on-demand.mov

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: arthur791004 <[email protected]>
Co-authored-by: matiasbenedetto <[email protected]>
Co-authored-by: okmttdhr <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.