Admin bar font appears thin in Firefox when themes turn on font-smoothing in body element

[cbaldelomar]

Font bug in admin bar when theme turns on font smoothing in Firefox

Looks good when in dashboard, or theme does not use font smoothing

Propose solution to declare proper font smoothing in CSS when declaring font in admin elements.

font: 400 13px/32px "Open Sans",sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;

[cbaldelomar]

Second version of patch

[SergeyBiryukov]

Most of the #wpadminbar * are there for overriding theme styles, so the comment is probably redundant.

[iseulde]

has-patch 4.2-early so moving to 4.2.

[DrewAPicture]

Do we still want to get this in for 4.2? I tested it with font smoothing enabled in latest Firefox and didn't see a difference between before and after.

Latest patch still applies.

[cbaldelomar]

I just tested this on the latest dev version of WordPress, 4.2-beta1-31767-src, running the latest version of Firefox, 36.0.1, and the problem still exists as I originally reported. If you are testing on a mac with Retina display, the font weight change might not be as obvious.

If you are trying to recreate the problem, make sure your theme has font smoothing turned on in the body element.

body {
  -moz-osx-font-smoothing: grayscale;
}

You should be able to toggle this css rule, and see the difference change in your admin bar text.

[DrewAPicture]

Replying to cbaldelomar:

I just tested this on the latest dev version of WordPress, 4.2-beta1-31767-src, running the latest version of Firefox, 36.0.1, and the problem still exists as I originally reported. If you are testing on a mac with Retina display, the font weight change might not be as obvious.

If you are trying to recreate the problem, make sure your theme has font smoothing turned on in the body element.

body {
  -moz-osx-font-smoothing: grayscale;
}

You should be able to toggle this css rule, and see the difference change in your admin bar text.

Thank you for the steps to reproduce, I'll give it another shot. Not retina, btw.

[DrewAPicture]

Using the directions in comment:7, I managed to reproduce the issue, and 30021-2.patch​ fixed the problem for me in latest Firefox.

[helen]

In 31824:

Toolbar: Protect against Firefox font rendering interference by themes.

props cbaldelomar.
fixes #30021.