For IE: Font embed, or image replacement?

HTML & CSS
1

I’m currently working on a website where it has recently become painfully clear to me that a large majority of the target audience will be using IE, and probably older versions of it at that.

At the current time, I have three different fonts embedded in the CSS, both in TTF and EOT formats (for IE), but older version are still giving me issues, as well as some other to-be-expected problems as well.

As much as I don’t like using text-indent with background images for image replacement on text, it seems that may be the best way for me to go at this point.

Does anybody have any suggestions? Would text-indent and background images be a horrible idea? I’m not entirely sure how frowned-upon the practice is.

Any insight is greatly appreciated. :slight_smile:

( on a side note, I’m glad I’ve discovered the SitePoint forums! they seem to have a multitude of information available, and I’m also looking forward to contributing my own knowledge in return. )

2

Yes, it’s basically just for headers on the website, and there will be quite a few. I’m going to try cufon out, as I have a bit of a grudge with Flash. Thanks a ton! I’ll let you know how it works. :slight_smile:

Update: Very awesome! Cufon seems to have saved the day. I’ve done a little IE testing and it seems to work great, and without Flash! Thanks for the recommendations, it’s much appreciated.

3

Hi,

I assume you are talking about using image replacement for certain headings etc. You wouldn’t want to replace passages of text etc. :slight_smile:

If you have a large number of headings and the details are changing regularly then image replacement would be a pain and I would just use a normal font (especially as you say you want to target older browsers) or perhaps try
sifr or [URL=“http://aaronwinborn.com/blogs/aaron/cuf%C3%B3n-alternative-sifr-image-replacement”]cufon.

The font squirrel site has a font-face generator to help with embedding fonts to cater for various browsers.

4

Ah I see! The IR covers the text that appears behind it. I’m assuming I’ll just need to be careful about transparency in my background-image?

Thanks for the help, I’ll give this a shot and let you know how it works.

5

The draw back to relying on IR and @font simultaneously is that IR assumes you have an explicit dimension ( the dimension of the image) while @font is essentially fluid. If youa re OK with giving the container element FIXED dimensions, this might work for you:

<h3>I am text to be replaced.<span></span><h3>

CSS
h3 { position:relative;
height:100px ;/(height of your image)/
width:300px; ;/(width of your image)/
overflow:hidden;;/(keeps text from spilling outside if enlarged)/}
h3 span {position: absolute; top:0; left:0 ; height:100%; width:100%; background:url (h3imagereplage.jpg); z-index:5}

hope this helps

Eseentially this is what happens:

6

I was just thinking, if I’m using image replacement, is there a reason to use @font-face embedding as well? It seems one of the primary benefits of using font embedding is that you can update the HTML content of the text to update it instead of having to recreate and image. If I’m using both techniques, I will have to do both anyways.

Would it be a bad idea to use image replacement throughout? I don’t like using the technique, as I always feel there is a better way to accomplish something. But if that is what it will take to get things working the way I need in IE, then I will do it.