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

Posted on 2007-07-22
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

    LVL 14

    Expert Comment


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

    Expert Comment

    LVL 38

    Assisted Solution


    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.


    Author Comment

    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

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now