Impact Font - How do I make it display similar across Browsers?

Hi there,

We have a site using impact font and it displays quite differently between the browsers, to the point where it's almost unreadable using Safari.

Could anyone come up with a solution that will allow us to get the heading as similar as possible across the major browsers?

Who is Participating?

Check this site and troubleshoot....maybe it helps you as this site helped me manipulate...

As you probably know, for a font to display in a client browser, the client computer MUST have that font installed. Site visitors who does not have it installed will not be able to see the text in that face. There's no easy way around this. Microsoft tinkered with WEFT (the .eot files you reference), but development of that stalled a few years ago, and never was a reliable solution for most sites.

However, as VirusMinus has suggested, there IS a technique using flash to substitute fonts but it's tricky, and has it's own drawbacks. The technique is called sIFR (scalable Inman Flash Replacement). Essentially, you replace short bits of plain text rendered in the default or CSS-specified font with text rendered in your selected font by a combination of javascript, CSS, and Flash.

Here's the official page, with more information, how-to's, and links:

Some drawbacks:
1) Limited to those with flash and modern browsers (due to the CSS and JS needed to implement it - but remember that using this technique, users who are unsupported still get the text specified by HTML/CSS prior to replacement). Flash is well-supported these days; JS, even in supported browsers, may be turned off in some instances. Flash may be limiting in accessibility. The bottom line is know your audience.

2) Font size does not dynamically scale - page must be reloaded if page size is changed, also limits accessibility if user tries to re-size font for readability. (although, see here:

3) Flash areas can be "sticky" and not allow scrolling via mouse wheel (user annoyance factor).

4) Text cannot be selected (for copy-n-paste, for example). This may not always be a bad thing.

5) Loading times in the font-replaced areas may be increased. The more you use it in a page, the more of an issue this can become.

6) Doesn't work properly on clickable link text.

None of these are necessarily show-stoppers, just tradeoffs (like many others we make as we design web pages) that you should be aware of.

antumAuthor Commented:
Thanks for your help, even though I'm probably not going to use it as a solution it does show me that I am pretty much stuck with what I've got unless I want to make the extra effort to use the sifr solution.

Thanks very much for your help
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.