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

[laurelfulford]

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

[laurelfulford]

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

[laurelfulford]

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

Applies to .editor-styles-wrapper in block editor

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

[sabernhardt]

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.

[audrasjb]

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

[audrasjb]

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

[audrasjb]

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

[audrasjb]

The proposed PR works fine.

Marking for commit.

[audrasjb]

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.

Committed in https://core.trac.wordpress.org/changeset/54106