Thread: @font-face ff3

    #1
  1. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,989
    Rep Power
    375

    @font-face ff3


    Ok I know that ff below 4 do not support @font-face, or do they?

    in ff4 the font looks different to it does in ff 3. In ff3, if i using firebug remove font-family:times-roman, it looks good but if i keep it in, the font looks ugly, which doesnt make sense as ff3 shouldnt be supporting font-face? also if i do: font-family: 'times-roman', arial; it doesnt take effect?

    here is a comparison, ff3 on left, ff4 on right:



    Code:
    body {
        font-size: 62.5%;
        font-family: 'Times-Roman';
    }
    @font-face {
        font-family: 'Times-Roman';
        src: url('../fonts/Times_Roman/font.eot');
        src: url('../fonts/Times_Roman/font.eot?#iefix') format('embedded-opentype'),
             url('../fonts/Times_Roman/font.woff') format('woff'),
             url('../fonts/Times_Roman/font.ttf') format('truetype'),
             url('../fonts/Times_Roman/font.svg#BebasNeueRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Are you asking about Firefox 3.0, 3.5, or 3.6? FF3.5+ support it.

    I'm not sure if it makes a difference, but (if you're using Windows) what are your settings for Cleartype?

    Do you have an example page we could look at?

    P.S. I'm surprised to see someone asking about (non-IE) browser versions this old. It often feels like I'm the only developer who bothers to test in FF3.x.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,989
    Rep Power
    375
    http://www.smallable.ec-campaigns.com/

    ff 3.6.10. is what that screen shot was for. but it looks so different?

    Well my company, we build pages and have to make sure they are ok in as many browsers as we can, but also some of my colleagues havent updated their versions! (they cant anyway as admin have to do it). so when they are looking at pages, they look different to what I see.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Hmm... it looks fine in FF3.5 and FF3.6 here. What version of Windows are you using? I'm using Win7 Pro 64-bit.
    Attached Images
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,989
    Rep Power
    375
    when i do a full refresh (ctrl+f5) i can see that the font looks similar to that of your screenshot (sh). However after the page has fully loaded, it goes back to the sh that i posted.

    if i use inspect element & remove the font-family: 'times-roman'; css. it goes back to how it is looking in your sh.

    does ff 3.6 use something other than ttf?
    Code:
    @font-face {
        font-family: 'Times-Roman';
        src: url('../fonts/Times_Roman/font.eot');
        src: url('../fonts/Times_Roman/font.eot?#iefix') format('embedded-opentype'),
             url('../fonts/Times_Roman/font.woff') format('woff'),
             url('../fonts/Times_Roman/font.ttf') format('truetype'),
             url('../fonts/Times_Roman/font.svg#BebasNeueRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Apparently FF3.6 supports both WOFF and TTF, but FF3.5 only supports TTF.

    What operating system are you using? Does your lack of response to my Windows questions mean you're using MacOS or Linux?

    By the way, I recommend leaving out the SVG fonts. They're primarily for older mobile devices and often don't look as good (they leave out kerning information).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,989
    Rep Power
    375
    sorry i was so busy with detailing what i found out taht i forgot about that question.

    I am using Windows 7 Enterprise, 64 but OS. SP 1
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Does turning Cleartype on or off make a difference? This article tells how to access its settings.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,989
    Rep Power
    375
    No, that didnt solve the problem. Thanks though. Our client doesnt seem to have the old browser/havent raised an issue so fingers crossed.

IMN logo majestic logo threadwatch logo seochat tools logo