SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    @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 ?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm talking about FireFox 2.0 & Mozilla 1.7.12 not IE

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I don't believe that font face is supported in browsers that old, I could be wrong though .

    Your SOL.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 .
    There is no need for a conditional comment.

    Code CSS:
    @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" );
    }
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,785
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    There is no need for a conditional comment.

    Code CSS:
    @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" );
    }
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand, I'm just going to add a Font-family for those other browsers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •