SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is it this comma before the trailing semi-colon that is upsetting firefox?
    Code:
    	src: local("☺"),;
    The comma shouldn't be there as there are no more urls on that line and the next line starts with a src.

  2. #27
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,156
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by kohoutek View Post
    It works on my test server: http:/lab.rockatee.com/tangerine.html
    @kohoutek - sorry to go off at a tangent here, but when I visit that link in FF, I have to enable JavaScript before the Tangerine font kicks in. I thought @font-face is pure CSS? Why does it require JS?

  3. #28
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    @kohoutek - sorry to go off at a tangent here, but when I visit that link in FF, I have to enable JavaScript before the Tangerine font kicks in. I thought @font-face is pure CSS? Why does it require JS?
    I forgot a trailing slash in the URL. It should be: http://lab.rockatee.com/tangerine.html

    There's no Javascript involved.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #29
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I found the culprits. The first culprit is what Paul has already mentioned; The extra comma needs to go, like Paul said in post #26. The second issue is the path in your CSS. You need to add "css/" to your paths.

    Instead of this:

    Code CSS:
    url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),

    This:

    Code CSS:
    url('css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #30
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rats - it didn't work.

    Not only that - the fonts stopped rendering in IE8 and Chrome.

    Thanks . . . rick

  6. #31
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Are you sure? I still see the same code on your site.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #32
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Are you sure? I still see the same code on your site.
    Adding the css/fonts disables the font rendering in ALL browsers.

    Take a quick look as I'm going to make the correction back shortly.

    Go to my homes page . . . www.propertieswithstyle.com (fonts not rendering)

    click :find south county & beach homes - - - on this page (and all of the map pages) the fonts are rendering via my original css on the server.

    Thanks . . . Rick

  8. #33
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,156
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I found the culprits... The second issue is the path in your CSS. You need to add "css/" to your paths.

    Instead of this:

    Code CSS:
    url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),

    This:

    Code CSS:
    url('css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    Actually, I don't think that's right. The fonts directory is inside the css directory, so calling it from a stylesheet, the original filepath was OK.

    Sorry about my earlier red-herring with JavaScript; I hadn't realised NoScript also blocks @font-face by default.

  9. #34
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Actually, I don't think that's right. The fonts directory is inside the css directory, so calling it from a stylesheet, the original filepath was OK.

    Sorry about my earlier red-herring with JavaScript; I hadn't realised NoScript also blocks @font-face by default.
    I know, but it didn't work on his site. It doesn't make sense to me, but that's the only way the font displayed in Firebug when I tested it two or so hours ago. It only worked when I added the css dir to the path. Anyway, I added the code I posted above to Rick's live site via Firebug (I set it on the .ttf font) and it worked in Firefox, the fonts displayed. I'm out of ideas if Paul's solution and the fixing of paths don't resolve the issue.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #35
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    The fonts are working for me in Firefox now. Perhaps it was removing the comma that did it. Strangely, though, the font urls still return a 404. Bizarre.

  11. #36
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The fonts are working for me in Firefox now. Perhaps it was removing the comma that did it. Strangely, though, the font urls still return a 404. Bizarre.
    Yes, the font is working for me in FF, Chrome and IE8. Rick, perhaps you just need to clear your cache?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #37
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,156
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The fonts are working for me in Firefox now... Strangely, though, the font urls still return a 404. Bizarre.
    Same here - although only the woff format gives a 404 (same as before). But it's working now in FF.

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    After removing the comma Firefox is using the TTF font now I believe as the Woff font is not loading.

    It says on the Font squirell site that IIS needs woff added to the mime type.
    add WOFF to your list of MIME types (if you are serving via IIS.)

  14. #39
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Insomnia strikes again. Obviously, when you use the web developer tools in FF, fonts won't show while testing, just like bg images and the like with relative paths which is why it worked when I added css to the path. It's just the comma as Paul indicated that was causing the ruckus.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  15. #40
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Squirrel Tangerine Fonts Now Rendering

    In Firefox. My computer at home has FF Ver 9.01 or something similar.

    The version in my lap top is the dreaded 3.5 something. That was probably the root of the problem.

    Now I've noticed that my main content is all messed up again.

    It seems that every time I fix something else goes haywire.

    Thanks for ALL of your help today.

    Rick

  16. #41
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It look OK to me, Rick.

    One side issue this problem has highlighted, though, is that your fallback font(s) should be as close as possible in size and nature to the @font-face font. If your @font-face font doesn't load, the fallback font is way larger than your @font-face font, and thus blows your design apart. I'm not sure what standard system fonts are most similar in size and/or appearance to tangerine, though. A bit of research needed there. Just some food for thought, anyhow.

  17. #42
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    After removing the comma Firefox is using the TTF font now I believe as the Woff font is not loading.

    It says on the Font squirell site that IIS needs woff added to the mime type.
    thanks Paul - I have absolutely no clue on what that means.

    mime . . . IIS . . .

    mime is a puppet show, right?

    IIS . . ?

    When I checked at home last night the Tangerine fonts were loading in FF version 9+

    However I now have a page that has lost its right and left column designs . . .

    Whew . . . I'm going to work on that now.

    Thanks . . . Rick


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
  •