[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2007-07-22
Medium Priority
Last Modified: 2008-02-07
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?


Question by:antum
LVL 30

Accepted Solution

VirusMinus earned 1200 total points
ID: 19544963
LVL 14

Expert Comment

ID: 19545640

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

LVL 38

Assisted Solution

lherrou earned 800 total points
ID: 19555756

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: http://projects.forkandspoonhelmet.com/ontextresize/)

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.


Author Comment

ID: 19570770
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question