Blurred Font on Safari and Chrome

Typography is one the most important aspects on a site. And playing around with WebFonts and CSS3 is awesome.

However, the final result might not look consistent across different browsers.

For example, time to time I like to add a light stroke on the text to improve contrast and readability, especially when for titles placed on pictures. Unfortunately what makes for a pretty text on Firefox, not seldom it looks awful up on Safari and Chrome (WebKit browsers).

Luckily it can be fixed via just CSS. Like so:

body,
h1, h2, h3, h4, h5, h5, p, em, a, div, li {
 /* Fixing the blurred text on WebKit browsers */
 -webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}

Targeting html body should be sufficient. If it isn't, you may want to try adding more elements, as shown in the second line, targeting what escaped.

Would you like to dedicate more time delving into the topic, this article is a good start How To: Clean Up Chrome and Safari’s Webfont Rendering.

Happy styling!