Make WordPress Core

Opened 5 years ago

Closed 15 months ago

Last modified 15 months ago

#45909 closed enhancement (fixed)

Twenty Nineteen: Consider syncing up font smoothing between the front end and block-based editor

Reported by: laurelfulford's profile laurelfulford Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.0.2
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: css Cc:

Description

This was originally reported by @kjellr in Twenty Nineteen's GitHub repo:

Currently, the front end of the site implements font smoothing via the following rules:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

These rules do not exist in the Gutenberg editor. This leads to a much heavier display of text in the editor than in the front end.

This will need to be scoped in such a way that it doesn't bleed out of the actual content in the editor into block-level controls/placeholder labels/menu text/etc.

Original ticket: https://github.com/WordPress/twentynineteen/issues/281

Attachments (4)

281-twenty-nineteen-fonts-front-end.png (28.3 KB) - added by laurelfulford 5 years ago.
Twenty Nineteen - how the fonts appear on the front-end
281-twenty-nineteen-fonts-editor.png (30.0 KB) - added by laurelfulford 5 years ago.
Twenty Nineteen - how the fonts now appear in the editor - noticeably heavier
Capture d’écran 2022-09-09 à 00.30.29.png (591.9 KB) - added by audrasjb 15 months ago.
Before patch (editor on the left, front-end on the right)
Capture d’écran 2022-09-09 à 00.33.19.png (596.3 KB) - added by audrasjb 15 months ago.
After patch (editor on the left, front-end on the right)

Download all attachments as: .zip

Change History (12)

@laurelfulford
5 years ago

Twenty Nineteen - how the fonts appear on the front-end

@laurelfulford
5 years ago

Twenty Nineteen - how the fonts now appear in the editor - noticeably heavier

This ticket was mentioned in PR #2811 on WordPress/wordpress-develop by sabernhardt.


18 months ago
#1

  • Keywords has-patch added; needs-patch removed

Applies to .editor-styles-wrapper in block editor

Trac ticket: https://core.trac.wordpress.org/ticket/45909

#2 @sabernhardt
18 months ago

  • Focuses css added

As noted in the original Twenty Nineteen issue and in ticket #55596, the value of font smoothing is questionable. However, if it's on the front end, it belongs in the editor as well.

#3 @sabernhardt
16 months ago

  • Milestone changed from Awaiting Review to 6.1

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


15 months ago

#5 @audrasjb
15 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Looks good to go! Self assigning for final testing and commit.

@audrasjb
15 months ago

Before patch (editor on the left, front-end on the right)

@audrasjb
15 months ago

After patch (editor on the left, front-end on the right)

#6 @audrasjb
15 months ago

  • Keywords commit added

The proposed PR works fine.

Marking for commit.

#7 @audrasjb
15 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 54106:

Twenty Nineteen: Add font smoothing to editor styles.

This brings consistency between editor and front-end typography.

Props laurelfulford, sabernhardt, audrasjb.
Fixes #45909.

Note: See TracTickets for help on using tickets.