Twenty Twenty: please use wp_enqueue_style for the fonts

[markhowellsmead]

Please please use wp_enqueue_style for the fonts (not CSS @import), so that they can be dequeued by a Child Theme or Plugin. (In case the Child Theme or Plugin wants to use different fonts.)

[nielslange]

@markhowellsmead Where do you see @import statements for fonts?

[markhowellsmead]

Replying to nielslange:

@markhowellsmead Where do you see @import statements for fonts?

Sorry, my bad - they're directly-referenced srcs in @font-face statements.

​https://github.com/WordPress/twentytwenty/blob/master/style.css#L254

[nielslange]

Sorry, my bad - they're directly-referenced srcs in @font-face statements.

​https://github.com/WordPress/twentytwenty/blob/master/style.css#L254

Don't worry and thanks for clarifying this! 😉 I see what you mean now and will create a patch for that. If the patch gets accepted is another story though. 😁

[markhowellsmead]

👏

[Otto42]

I'm confused as to what the issue here is. If a child theme wants to use different fonts, it can do so simply by defining them as such in the child theme CSS.

[markhowellsmead]

Replying to Otto42:

I'm confused as to what the issue here is. If a child theme wants to use different fonts, it can do so simply by defining them as such in the child theme CSS.

This true, but the font files from the parent theme will still be loaded, which is a(n albiet minor) performance hit.

[poena]

I agree that non system fonts should be enqueued.
Though I should probably learn more about variable fonts before I open my mouth ;)

[ianbelanger]

#48922 was marked as a duplicate.

[poena]

Move the font-face CSS to a separate file and enqueue the file.

[poena]

Testing instructions

Apply patch 48630.diff.

Block editor & front of the website:
Confirm that the new CSS file, assets/css/font.css is loading. You can use your browser's developer tools to check this.
Confirm that the post title uses the correct font family (Inter) and looks the same with and without the patch.

Classic editor:
Install and activate the classic editor plugin.
​https://wordpress.org/plugins/classic-editor/
(Alternatively test on an older WordPress version that does not have the block editor)

Confirm that the new CSS file, assets/css/font.css is loading. You can use your browser's developer tools to check this.

Add an H1 heading to the the classic editor, and confirm that it uses the correct font family (Inter) and that it looks the same with and without the patch.

Next please change the WordPress installation to an RTL language and confirm that font family is correct in the editor and on the front.

[mukesh27]

This ticket was discussed during the performance bug scrub.

@poena the 48630.diff​ did not have font.css file. Could you please add it? Or open new PR.

Additional props: @joemcgill

[poena]

Move the Inter font-face declaration to a separate file

[poena]

@mukesh27 Thank you for notifying me, I had forgotten to use
svn add. Luckily I still had the files.

I made two other changes:
Updated the since.
Reverted the part where I had moved the CSS for the NonBreakingSpaceOverride.

[SergeyBiryukov]

In 57311:

Twenty Twenty: Move the Inter font declaration to a separate file and enqueue the file.

This allows the font to be dequeued by a child theme or plugin.

Props poena, markhowellsmead, nielslange, Otto42, SGr33n, mukesh27, joemcgill.
Fixes #48630.

[SergeyBiryukov]

In 57313:

Twenty Twenty: Add missing comma in twentytwenty_classic_editor_styles().

This resolves a WPCS error:

There should be a comma after the last array item in a multi-line array.

Follow-up to [57311].

See #48630.