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.
