Discrepancy in Font Family between Editor and Front End

[jorpdesigns]

Quick summary

In the Page or Post Editor, the default font family is different from what is shown on the Front End. Initially thought the bug was similar to #86570 but it appears to occur on more themes (tested on Kingsley, Arbutus, Geologist, Archeo, Feelin' Good and Bedrock).

Editor View

Front End View

Steps to reproduce

1. Open a test site and activate any of these themes: Kingsley, Arbutus, and Geologist (or probably any theme).
2. Create a new post.
3. Add a paragraph with sample text.
4. Preview your changes.

What you expected to happen

Font family should be consistent in both the Editor and on the Front End.

What actually happened

Font family in the Editor is different to what is shown on the Front End. Looks like the Editor is using the system font?

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Reported in 8056292-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8056292-zen
• 8063771-zen

[tvolpert]

same issue in 8063771-zen, using the Byrne theme.

it looks like what's happening behind-the-scenes (on this user's site anyway) is that editor-experimental.css and index.css are overriding the body font choice set in the editor -- because declaring just body is more specific than :where(body), which is what the <style> tag is using.

:where(body) seems like an unnecessarily-complicated way to try and select this element anyway, unless we're trying to give it 0 specificity for some reason...

[mrfoxtalbot]

Thank you for the additional details, @tvolpert. Just to make sure I am following you, does this mean the bug is theme-dependent or does it have to do with the way we implement Gutenberg on dotcom?

If it is theme-specific, we should transfer it to the /themes remo and tag the affected themes.

Thank you!

[mrfoxtalbot]

@jorpdesigns, were you able to reproduce this (on simple or AT) using Twenty Twenty-Four or any other of the bundled themes?

[tvolpert]

@mrfoxtalbot It's a little of both really, but I think it probably lands more on the theme side than the Gutenberg side? But it seems to affect a lot of themes. I've been able to replicate using Twenty Twenty-Four and Infield just now.

The problem (as far as I can tell anyway) comes down to CSS specificity: the Gutenberg stylesheets are more specific with their selectors for the default body font than the theme is. So, theoretically, any theme that uses just plain old body as a selector instead of :where(body) would most likely be fine, as long as it comes later in the Cascade. But it seems like a lot of our themes are using :where(body) for... reasons that I assume sounded good at the time, but I can't fathom what they would be.

[tvolpert]

Also confirmed it's an issue on Simple sites as well as Atomic. it's especially egregious on the Free plan because changing that font will prompt you to upgrade in order to unlock custom styles that you can't even see 😬

[mrfoxtalbot]

Thank you for the additional testing @tvolpert.

I did a quick test and this is NOT happening on a self-hosted site (with or without the Gutenberg plugin) using Twenty Twenty-Four... so this is something dotcom-specifc.