Discrepancy in Font Family between Editor and Front End

[jorpdesigns]

Discrepancy in Font Family between Editor and Front End

[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 😬

[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?

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