783137 - Google web fonts ugly

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[Sciss]

Attachment: webfonts.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:14.0) Gecko/20100101 Firefox/14.0.1
Build ID: 20120713134347

Steps to reproduce:

Visit different pages. E.g. http://ls.implicit.ly/ http://slick.typesafe.com/


Actual results:

The css embedded web fonts look incredibly ugly. This problem doesn't occur with webkit based browsers (Safari, Chrome) or Opera. In the two pages mentioned, the four fonts are 

family=Lato:400,400italic
family=Open+Sans+Condensed:700
family=Ubuntu+Condensed
family=Sorts+Mill+Goudy



Expected results:

The fonts should render nicely.

Comment 1

[Jonathan Kew [:jfkthame]]

Both the sites mentioned are suffering from poor design/authoring. They're loading web fonts with a single weight that is declared as regular in the @font-face rule, but then using those fonts in elements (e.g. headings) with font-weight:bold styling. In this situation, Firefox will (correctly) apply a synthetic bold effect to the font (to maintain a visual distinction between the elements with font-weight:bold and content that uses the same font family but with font-weight:regular). While this ensures that the bold styling is not simply lost, it often doesn't look particularly good.

If the web font (as loaded via the @font-face rule) is supposed to be considered a "bold face" already, so that when it's used in elements with font-weight:bold, no further emboldening will be applied, then the @font-face rule needs to include the proper font-weight descriptor. Or if the font face (that is being loaded as regular weight) is not supposed to be synthetically emboldened, then the elements should not have the font-weight:bold property. Or if the web font is intended to be used in both regular and bold weights, then the appropriate two faces should be loaded (with proper font-weight descriptors) so that the browser does not have to resort to artificial emboldening.