CSS Quick Tip #2: @font-face Render Issues?

I was messing with @font-face again (as you do) and noticed that the text rendered slightly differently on different browsers and couldn’t understand why?

It was like the text had a certain level of bold applied to it, even though in my CSS I had specified the font attributes correctly. As a bit of a perfectionist I decided that I wanted it to render the same across all browsers (who wouldn’t?) and not settle for “well it looks ok in X and Y but I’m not too fussed about Z”.

After some digging around I found that all that’s required is a single font attribute that needs to be added to your CSS:

font-style: inherit;

I added this to my reset section of my CSS but if you aren’t using one then add it directly to your text element (h1, h2, p etc) that’s using @font-face.

This may not be a specific fix for all of you but it’s definately a good place to start and you should include it on anything that uses @font-face in the future.