Noto Serif Font Missing in GB 10.0

[tomjn]

Description

When no editor style is defined, the default styling uses Noto Serif via Google. However, the font is not included, and no attempt is made to load it, so the browser falls back to Times New Roman

Step-by-step reproduction instructions

On a site that uses the default block editor styling, install and activate the Gutenberg plugin, then create a post

Expected behaviour

The text appears in the Noto Serif typeface as specified in the default stylesheet, or falls back to system fonts

Note that the problem is not that Noto Serif fails to load, it's that it is never attempted. There is no failed request, because it was never requested.

Actual behaviour

The typeface is specified, but not present. The browser uses the default font instead ( Times New Roman ) of the system font stack

Screenshots or screen recording (optional)

expected:

actual:

WordPress information

• WordPress version: 5.6.1
• Gutenberg version: 10.0.0
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? No, but I reproduced using multiple themes from different vendors

Device information

• Device: MBP 13" Intel
• Operating system: MacOS 11.2 Big Sur
• Browser: Chrome 88

[tomjn]

This snippet hot-fixes the problem:

add_action( 'enqueue_block_editor_assets', function () {
        wp_enqueue_style( 'wp-editor-font' );
} );

Without this, themes that do not register an editor stylesheet have broken typography, as well as themes that do not specify a font family in their editor stylesheets

[tomjn]

I believe this PR is related #26822

[talldan]

@tomjn What's a good theme to test this with?

Separately I did some digging, it looks like the noto serif font is/was defined in WordPress core. It was removed here, which will be a change that goes into WP 5.7:
WordPress/wordpress-develop@d041904

This is the associated trac ticket - https://core.trac.wordpress.org/ticket/46169.

Will need to ascertain how this will work for those using Gutenberg with older versions of WordPress.

[tomjn]

hmmm it sounds like this needs retesting but on WP v5.7

Currently this impacts my own sites theme at https://github.com/tomjn/tomjn.com, I have't tested elsewhere yet given time available

[talldan]

I'm not too familiar with the change. There is a comment in #26822 which mentions that falling back to system fonts is accepted as a reasonable consequence - #26822 (comment)

@jasmussen I think you've been involved in this change, any thoughts?

[talldan]

Also cc @aristath as the reviewer.

[aristath]

Thanks for the ping :)
Yes, Note Serif will no longer be loaded by default. It was decided to remove it for improved performance and privacy since system fonts are acceptable and loading a google-font raises GDPR questions & concerns.
It always was a pretty, but opinionated font-family and was used as a fallback in case the theme was not defining any font-families on its own when Gutenberg was just starting.
Nowadays most themes add their own styles and font-families which is why it was deemed the right time to remove it from core. Not a bug 👍

[tomjn]

@aristath @talldan but it does not fallback to system fonts.

There's a font stack for system fonts available, but that styling rule is overriden by a font-family directive that says only Noto Serif can be used.

So instead of nice system fonts such as Arial or Helvetic, we get the default unstyled font.

Honestly, I don't care if it uses Noto Serif or system fonts, but right now it uses neither.

As a result the computed font family is Times

[tomjn]

Note that this is not a feature request that Noto Serif be restored.

This is a request that the font-family: 'Noto Serif'; rule be removed when Noto Serif is not enqueued, or that it be added to the more comprehensive font family stack in the other styling rule.

System fonts are not used when falling back to system fonts

I suspect that you all have the Noto serif font installed on your systems.

[aristath]

My apologies, I misunderstood the issue 😅

Checking it now

[aristath]

This is indeed caused by this change: https://github.com/WordPress/gutenberg/pull/26822/files#diff-27913c4345b92dfdf4a82588f72fcf266a13ed255f723a63966b5d70dba4e79a and happens on WP5.6 + Gutenberg10. On WP5.7 there is no issue.

The only solution I could find to allow both new and old versions to work was adding this snippet:

add_filter( 'gettext_with_context', function( $translation, $text, $context, $domain ) {
    if ( 'default' === $domain && 'CSS Font Family for Editor Font' === $context && 'Noto Serif' === $text ) {
        return '-apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif';
    }
    return $translation;
}, 10, 4 );

It works, but feels very hacky. 🙊
@jasmussen we could use your feedback on this one, any ideas?

[jasmussen]

Tricksy. Let me be sure I get this matrix right:

• WP 5.6 vanilla: Noto Serif, works well
• WP 5.6 + Gutenberg 10: Noto Serif, but broken
• WP 5.7 vanilla: System fonts, works as intended
• WP 5.7 + Gutenberg 10: System fonts, works as intended

If this is right, then it's 1 out of 4 cases that's broken, and broken in a way that is temporary until WordPress is upgraded to 5.7, correct?

I'm unsure how widespread the issue is given the matrix, would a temporary solution be to suggest your hack be added to the functions.php file on the affected site?

[aristath]

If this is right, then it's 1 out of 4 cases that's broken, and broken in a way that is temporary until WordPress is upgraded to 5.7, correct?

Correct.

I'm unsure how widespread the issue is given the matrix, would a temporary solution be to suggest your hack be added to the functions.php file on the affected site?

It would be best if we could find some other solution, I consider that snippet an ugly last resort. 😅
We can use it in tickets as a temporary solution, or we could add something similar to that in the compat.php file wrapped in a WP version-check so it only runs for those that need it 🤔