@font-Face and Older Browsers

What solution is there to get @font-face to work for these browsers FireFox 2.0 & Mozilla 1.7.12 ? Is my only option @font-family ? Or is there a specific font type that these browsers can only read ?

Hi, IE only suppports .EOT type fonts, while others support .TTF type fonts, so you’d have to give regular browsers .TTF and feed IE a conditioanl comment .EOT font :).

I’d recommend staying away from it in general though.

I’m talking about FireFox 2.0 & Mozilla 1.7.12 not IE

I don’t believe that font face is supported in browsers that old, I could be wrong though :).

Your SOL.

There is no need for a conditional comment.


@font-face {
  font-family: "AndaleMono";
  src: url( "AndaleMono.eot" );
  src: local( "Andale Mono"),
       url( "AndaleMono.woff" ) format( "woff" ),
       url( "AndaleMono.ttf" ) format( "truetype" ),
       url( "AndaleMono.svg#AndaleMono" ) format( "svg" );
}

The font-squirrel site show you which browsers are supported.

Older browsers should resort back to normal text which is the best you can do unless you want to do sifr (or similar) instead.

I did not know that, I assumed one format would override the other, tholugh thinking about it, it wouldn’t because of the format types :).

I just went to sitepoints refernece on this and Mozilla isn’t even listed, and FF 2 is on the unsuported list.

Basically for Mozilla and FireFox 2.0 I should just use @font-family ? I do have a TTF for Mozilla and FireFox 2.0 and there not rendering it. My only option is to include a sIRF font for those browsers?

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Huskey, Paul was correct, @font-face is an element of CSS3! Basically it’s only technically a recent “innovation” outside of Internet Explorer (who started the trend), so no… old versions of Mozilla won’t support it, neither will old versions of Safari (etc). What you should always do when using font-face (no matter the browser) is have a fall-back mechanism in case someone cripples such functionality (never rely on bleeding edge stuff). This is where you use font-family and stacks. Honestly I don’t know why your bothering with the old versions of gecko, very few people use them, almost everyone outside of IE upgrades their browser regularly. As for falling back onto using sFIR, why bother? not many people will see the effect and that will easily fail if they don’t have scripting or flash enabled. :slight_smile:

Basically I should have Font-Family rule in that style for fall back ? Well I’m only going to do that, I’m not even supporting IE6.

You have the custom font at the front, then you have fall-back fonts following it to ensure if the custom typeface is unavailable there is something for it to drop back onto as an alternative. Generally you want to aim for Custom Font, Font which looks closest, websafe fall-back, font style (like serif or sans-serif). :slight_smile:

I understand, I’m just going to add a Font-family for those other browsers :slight_smile: