Bug 28915 – Fonts loaded with @font-face lose antialising after rendering non-antialiased text

• Component: Text
• Status: RESOLVED DUPLICATE

[Brian Campbell]

Created attachment 38937 [details]
example of the bug

If you use a web font loaded with @font-face, and have a span of text rendered without anti-aliasing (for instance, Monaco 9px), followed by text rendered using the remote font, the text rendered in the remote font will also lack anti-aliasing. The text will continue to lack anti-aliasing until you use a local font again, that is anti-aliased. This bug occurs with several different web fonts that I tested, and several different local fonts at sizes small enough to disable anti-aliasing, and several different local fonts at larger sizes that caused anti-aliasing to be restored.

This bug is present in the wild, for example on http://www.zeldman.com/superfriends/guide/ , assuming you have your fixed-width font set to a small enough size (I have mine set to monaco 9px).

I've attached an example that demonstrates the problem, with several different variations of the problem showing up.

[Amadeus]

I have found an interim fix for this, just apply:

-webkit-text-stroke-color:rgba(0, 0, 0, 0);
-webkit-text-stroke-width:1px;

To any elements that give yout he problem.

[Alexey Proskuryakov]

This is still reproducible with nightly builds.

[Alexey Proskuryakov]

<rdar://problem/7975923>

[Mihai Parparita]

Just ran into this in the wild with: http://www.newyorker.com/reporting/2011/07/11/110711fa_fact_auletta

(caused by the "THE NEW YORKER REPORTING & ESSAYS" 8pt text before the headline)

Selecting the headline text renders it anti-aliased, so in at at least some rendering paths the code is correct.

[Mihai Parparita]

*** Bug 57490 has been marked as a duplicate of this bug. ***

*** This bug has been marked as a duplicate of bug 67996 ***