Skip navigation
AdeptDigital
Currently Being Moderated

Bad font render on PC

Jun 17, 2013 7:59 AM

I have a site I am developing and I just cannot get the Adobe Garamoind font to render correctly on FF, Chrome, or Opera on a PC. Have not tried SAfari but oddly enough it works just fine in IE.  All the browsers on a mac render the font correctly so I am thinking it has something to do with windows OS and if so how do I code a fix in CSS3?

 

Thanks,

Brett

 

This is the page in question:

 

http://adeptdigital-llc.com/true/

 

This is the CSS I am using for the font:

 

@font-face {

    font-family: 'AGaramond_Regular';

    src: url('fonts/AGaramond-Regular.eot');

    src: url('fonts/AGaramond-Regular.eot?#iefix') format('embedded-opentype'),

         url('fonts/AGaramond-Regular.ttf') format('truetype'),

         url('fonts/AGaramond-Regular.svg#AGaramondRegular') format('svg');

    font-weight: normal;

    font-style: normal;

}

 

font-family: 'AGaramond_Regular', Geneva;

 
Replies
  • Currently Being Moderated
    Jun 17, 2013 8:55 AM   in reply to AdeptDigital

    You can't activate it via css for obvious security issues (we don't get to control a user's preferences via our websites).

     

    Asking your viewers to go into their browser or computer settings to change something to make your site look slightly better is a horrible idea and would never work.

     

    The thing is, aside from a few designers, most people won't notice that your AGaramond is not anti-aliasing correctly.

     

    This is one of the issues when importing fonts using css, you still can't control them with 100% certainty (it's better than the days of 4-5 total fonts, but...). There are a few hacks out there that will make them look a little better in certain browsers. I'm sure you've found some pertaining to adding opacity, font-smoothing for webkit browsers and the like. The problem is, they don't work for all imported fonts or across all browsers.

     

    It's honestly better to research a couple of other font options that are similar to your chosen font to find ones that do work between browsers/versions/platforms and use those instead. Google has a ton of fonts that typically work well cross-platform and are easily testable between machines before you lock in on one or another.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 9:19 AM   in reply to AdeptDigital

    Google has EB Garamond in their list of web fonts that may display better than AGaramond loaded via the @font-face route.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 9:47 AM   in reply to AdeptDigital

    Your client isn't using Windows XP by chance, are they?

     

    @font-face only works in IE9+, anyone with IE8 or lower (ALL XP users) will only see your backup fonts, or if you don't have any backup fonts in your css font stack, the default browser "Serif" font which is noticably different from, and quite bad in comparison to, AGaramond.

     

    Maybe that is what he noticed vs a simple anti-aliasing issue?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 9:56 AM   in reply to Jon Fritz II

    I'm using Windows 7 and I see render poor in Firefox and horrible in Chrome but great in IE, so it shouldn't be attributed to a specific version of Windows.

    BrowserRendering.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 10:16 AM   in reply to AdeptDigital

    I can't post a link directly to the Google webfonts, but if you go here, http://www.google.com/fonts/ and type in Garamond you'll get the only listing for EB Garamond.

     

    I've had the exact same display problem with some web fonts in the past and it was mostly when using them at smaller sizes that they didn't work well in FF. I eventually had to find another similar looking font in order to get around the problem.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 3:36 PM   in reply to AdeptDigital

    From CSS Font-Stack.  These are pretty common to all modern win/mac systems.

     

    body {

    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 3:55 PM   in reply to AdeptDigital

    What I'm suggesting is using your custom web font ALONG with the default Garamond font-family stack just in case the unthinkable ever happens. 

     

    Incidentally, I've been using Adobe Edge Web fonts (free) without any cross device problems.

    http://html.adobe.com/edge/webfonts/

     

    Based on my limited experience with Google's web fonts, I think they come up short in terms of choices and providing all the file types necessary to support various devices.  More than once, I've used a Google font only to find it didn't support EOT, TTF or WOFF. Back to drawing board...

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points