Tags: , ,

Categorized as: CSS

Posted by

Font-Face Rendering

@Font-Face – better type face choices for web

When I first started to dabble with websites, type face choice was always a bit of a dull moment, being stuck with type faces that were locally on peoples machines started to become a bore!
But with the discovery of CSS @Font-Face that all changed!

All of a sudden there were a plethora of type faces to start using, this is fantastic if you are looking for a way to spice up a dull web page or design.

But! With new technology comes quirky behaviour and problems, one problem I ran into was when I started to designing sites for mobile use such as mobile Safari or Android devices. The main issue was rendering of the type, it never seemed consistent, and then all of a sudden I came across the most grotesque situation, I had been using ‘Quicksand’ for a project and noticed that on the iPad the titles looked awful, not something you could get away with!

The headings looked like they were double rendering, a kind of duplication effect was occurring, I guess it kind of looked like a drop shadow effect but with no blur! Extremely frustrating, I thought I would have to stop using the @Font-Face rules as there seemed to be no way of getting rid of it! But as luck would have it I stumbled across this totally awesome post on css-tricks.com in the Forum! and thank god I did, as it is a total life saver!

Rendering text

Bad rendering of text

So the code for removing this horrible effect is simple! Basically you just need to reset the font-weight to Normal in your reset style sheet or your main style sheet:

h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */
font-weight: normal;
text-shadow: 0 0 0; }

Here is a link to the original forum post, a massive thank you to this lovely chap!: Aaron Silber

http://css-tricks.com/forums/topic/weird-mobile-safari-font-face-problem-font-doubled-and-offset-to-the-left/