🔞 ADULT: WordPress/gutenberg/issues/ - HD Photos!

Skip to content

Font Weight Conflicts Between Built-in and Installed Fonts #58764

@okmttdhr

Description

@okmttdhr

Description

There was an issue (Automattic/wp-calypso#84590) related to the theme that provides built-in fonts with limited font weights. That issue seems to have been solved in Gutenberg ≥ 17.6, but new issues have arisen. These issues are observed when installing the same font as the built-in fonts provided by a theme.

Observed Issues:

  1. The built-in and installed fonts are treated as distinct fonts on the UI.
  2. Changes in font-weight are not immediately reflected on the canvas, requiring a page reload for updates to be visible. (It might be related to Uploaded Fonts Are Not Reflected in Editor Canvas Immediately #58765.)
  3. The default font-weight provided by the theme is altered upon installing a new font variant, which should not be changed.

Expected Behavior:

  • The UI should recognize and treat the built-in and installed fonts as the same.
  • Font updates, especially weight changes, should be immediately visible on the canvas without reloading the page.
  • Installing new font variants should not alter the default font-weight settings the theme provides.

Step-by-step reproduction instructions

  • Ensure the active theme is set to Adventurer.
  • Navigate to the Site Editor
  • Add an H1 block with “default” font-weight through the “Appearance” setting.
  • Add an H2 block with a “light” font-weight through the “Appearance” setting.
  • Initially, observe both H1 and H2 using the same font weight in the canvas.
  • Open the Font Library modal and install ALL font variants of the Rubik font.
  • Notice that the built-in font and the installed font are recognized as two separate entities in the Font Library modal. (Observed Issue 1)
  • Change the font weight again for H1 and H2 blocks and observe they still display the same font weight in the canvas. (Observed Issue 2)
  • Save changes and view the site front (outside the canvas) to see both H1 and H2 displaying the updated font-weight. (Observed Issue 3 for H1)
  • Reload the editor and observe both H1 and H2 now reflect the updated font weight on the canvas. (Observed Issue 3 for H1)
  • Open the Font Library modal and remove the Rubik font, noticing that the font weights for both H1 and H2 do not revert to their previous states. (issue 2)

Screenshots, screen recording, code snippet

Screen.Recording.2024-02-07.at.15.16.22.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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions