Garry Aylott Design

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.

Have you ever been on a website a wondered how to achieve that nice 1 pixel bounce when you click on a link or button? It’s easy to do with a simple line of CSS applied to the a:active state:

a:active { outline: 0; position: relative; top: 1px; }

Give it a try, it’s a neat little effect that adds an extra touch to your links.