Using CSS Image Replacement for Non Web-Safe Fonts
If you’re a designer, you’ve run into the issue of web-safe fonts in your designs before. If you’re not a designer, then you might be wonder just what IS a web-safe font?
Web-safe fonts are those fonts likely to be present on a wide range of computer systems, and are used by web content authors to increase the chance that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will select an alternative — in the case of dingbat typefaces the alternative is unlikely to have similar characters at the same code points.
Here is the current list of web-safe fonts:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
What’s the Problem
Well, the problem is simple. Designers are pretty creative people, and the current set of fonts that are universally supported on all machines are simply limiting. As a designer, I want to be able to use fonts that are not on the “web-safe” list without causing compatibility issues and design differences from visitor-to-visitor.
Because of the need to break out, I’ve began using a technique called CSS Image Replacement.
How to use CSS Image Replacement
Basically, this CSS method serves as a way for you to effectively use “non web-safe” fonts in your designs. In a nutshell, what you do is include the text within your HTML document, assign it an id or class, and then use CSS to set a background image while bouncing the actual HTML text off the screen, thus making the non web-safe font visible and the HTML text not.
First, enter some text into your html document, and include it as part of a div, span, or something you can assign and ID or Class to:
Now assign it an id or class (if you plan to re-use):
Now refer to it your CSS file:
margin: 0;
padding: 0;
width: 200px;
height: 100px;
background: url(../images/sampletext.jpg) no-repeat;
text-indent: -9999px;
}
In the above code, what we’re doing is setting a background for the div (be sure to also specify height and width of the image in the CSS or this won’t work), and then using the text-indent property to bounce the HTML text off the left side of the screen while the div stays in place.
SEO Ramifications
A word of caution: this technique is not for the faint of heart. And for that matter, don’t go blaming me if you’ve used (or abused) it and get penalized.
So with that warning in mind, how should you proceed? I will say I have used this technique many times, have never abused the ability to add text that a user can’t see (unless they view your source code), and have never been penalized.
I recommend that you use it only to reflect the text you have in the HTML (i.e. your image’s text shouldn’t say something all that different from your HTML text). Basically, this technique shouldn’t be used for SEO – but can really kick your ass if you try to go black-hat on it!
Here is an article from SEOMoz supporting the CSS Image Replacement technique (if not abused). In addition, here is another article from Joost de Valk supporting CSS Image Replacement.
Related Posts
If you like this post, then you might like these as well!
-
noraseo
-
Matt Boardman
