SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font rendering weirdness with @font-face

    I'm getting poor quality rendering in Safari 5 and Firefox 3 (possibly others as well, though this is what I've tested).

    I'm using a few fonts from FontSquirrel via their generator. Usually, when the page loads, everything looks fine, but when scrolling around even a little bit, some fonts will redraw poorly. I've attached two screencaps of the font, rendering correctly, and then of the font rendering poorly.

    These were fonts available on FontSquirrel, so it shouldn't be a corrupted source file or anything. Google didn't yield anything about issues here.

    Are there any know issues with using @font-face with more than one font on a page? Any theories?

    If you'd like to see this on the live site, look here in the sidebar.
    Attached Images Attached Images
    body {
    display: public-affection;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hmmm, that doesn't happen in the Mac versions of FF and Safari.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Redraw failure, pretty typical for any of these 'advance font' techniques... They all pretty much break horribly in all browsers on my machine, which is why I usually say screw it, suck it up, and use a standard font instead.

  4. #4
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm actually testing on my Mac. Can you guys point me to any web resources on this? I can't find anyone else talking about this problem so far.
    body {
    display: public-affection;
    }

  5. #5
    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)
    I don't think there's many resources on it but I've encountered the issue quite often (ironically) in Internet Explorer with certain typefaces.

    Perhaps font smoothing is playing a part in the issue of rendering, but I guess that's what you get for taking advantage of CSS3 (an unfinished draft).

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    but I guess that's what you get for taking advantage of CSS3 (an unfinished draft).
    Hence why I wouldn't even be wasting my time on trying to do that in the first place.


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
  •