Using CSS Image Replacement for Non Web-Safe Fonts

October 8, 2009 // Author: Jacob Stoops // 473 views // View Comments
Using CSS Image Replacement for Non Web-Safe Fonts
CSS Image Replacement can be a great way to utilize non web-safe fonts in your designs, while not hurting your SEO.

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:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Impact
  7. Times New Roman
  8. Trebuchet MS
  9. 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.

CSS Image Replacement

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:

<div>This is my sample text.</div>

Now assign it an id or class (if you plan to re-use):

<div id=”sampletext”>This is my sample text.</div>

Now refer to it your CSS file:

#sampletext {
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.

Like This Post? Why Not Share it.

Related Posts

If you like this post, then you might like these as well!


  • CSS are great to speed up the loading time of a page. This a nice tutorial. Thanks, I've learned a lot from here.
  • CSS are great to speed up the loading time of a page. This a nice tutorial. Thanks, I've learned a lot from here.
  • very nice post thanks
  • I am a designer, and this post caught my attention. I have been reading your articles (as well as watching them)for the last few months, trying to grasp the basics of seo and also...just creating a well organized and smart site/blog. I have, now and in the past used CSS image replacement in nearly every site that I have produced, whether it was for a logo or even the entire navigation. Until digging into the seo world, I never saw this as a problem. I guess the only thing to do is use it wisely, and hope the brains behind SEs are smart enough to decipher true content form keyword spamming. Fingers crossed, I have never been flagged, a person can do only so much with websafe fonts.

    Looking forward to your next video.

    Matt
blog comments powered by Disqus