CODEWITHSUNDEEP
fontscssfont-face
technopeasant
technopeasant

Reputation: 7939

@font-face rendering thick

using standard fontsquirrel based @font-face mark up.. the font is rendering on the thick side. below is a screenshot demonstrating the font in a few different ways. top is photoshop's render, second is chrome's render of the same font (obviously much thicker), and third is chrome's render of a similar font, which is also rendering kind of chunky.

http://cl.ly/0e3b2t1N0U2e003h322O

Tried using font-weight:lighter with no avail.. is there any trick to lighten it up?

thanks!

Upvotes: 10

Views: 7861

Answers (2)

Mike Kormendy
Mike Kormendy

Reputation: 3475

In addition to the above, I had an issue with a Font Squirrel created font kit and noticed the rendering a little bolder than I initially had seen too.

Sometimes the default font weight for headers (h1, h2, etc) in the user agent (browser) is set to 800. If you use a CSS reset, they often fix the default to something around 500 or 400.

Read the following article for more information:

http://css-tricks.com/watch-your-font-weight/

Upvotes: 1

technopeasant
technopeasant

Reputation: 7939

added a few things to the h1 markup (where the fontface rule was applied).

font-weight:normal; fixed a weird doubling thing that happened in iOS

-webkit-font-smoothing: antialiased; handled the thick render

Upvotes: 31

Related Questions