15 Replies Latest reply on Jun 17, 2013 4:00 PM by AdeptDigital

    Bad font render on PC

    AdeptDigital Level 2

      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?





      This is the page in question:




      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;

        • 1. Re: Bad font render on PC
          AdeptDigital Level 2

          I just found an answer on the stackoverflow site but it deals with ClearType, a function on the Windoews OS.  How would I activate that function in CSS? Seems that if this is so than every computer is going to need to be setup for this site when they visit?  Is that possible, or even a good idea?  The page is here:


          http://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-real ly-bad-which-fonts-are-you-using-that-rend

          • 2. Re: Bad font render on PC
            Jon Fritz II Adobe Community Professional & MVP

            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.

            • 3. Re: Bad font render on PC
              AdeptDigital Level 2

              Thanks for the suggestions but my client was the one who spotted the error in the font render and he is decidedly not a graphic designer, he is a general contractor.  I could just attempt to pass it by claiming that the browsers on each and every computer look at things differently but I am not willing to tell him that.


              I don't know if its OCD, or prideful on my part or a unattainable perfection that I seek but I expect an Adobe font to work.  If you notice the font is in several different sizes and colors and is rendered correctly with some browsers yet horribly with others.  As graphic designers how are we supposed to accept the idea that the programmers at Adobe know what they are doing when they cannot create a font that works in all browsers in any size or color?


              If I cannot trust Adobe fonts to work properly than what is the point of the @font-face function in the first place, there is simple no excuse for not building a font properly if you are the premiere and greatest of design programmers.  I'm sorry but I expect as much from my tools as my clients expect from me.


              I continue to hope there is a solution out there that does not involve sacrificing my artistic credentials nor making excuses for the poor performance of a "trusted" font foundry. I hope a hack or other method of rewriting the CSS to make this work the way we all expect it to exists, otherwise Adobe has and continues to fail in its attempts to get it right.

              • 4. Re: Bad font render on PC
                Cozmicone Level 4

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

                • 5. Re: Bad font render on PC
                  Jon Fritz II Adobe Community Professional & MVP

                  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?

                  • 6. Re: Bad font render on PC
                    Cozmicone Level 4

                    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.


                    • 7. Re: Bad font render on PC
                      AdeptDigital Level 2

                      No we are both on Windows 7

                      • 8. Re: Bad font render on PC
                        AdeptDigital Level 2

                        @Cozmicone Can you post a link to the page with that list? I wonder if Google's list only recommends fonts from Google's library, or if any Adobe fonts are on there.

                        • 9. Re: Bad font render on PC
                          AdeptDigital Level 2

                          The reason I contribute it to Windows is because in FF, Safari, Chrome on Mac OS  render just fine.  I think its a combination of OS and browser.  Why can we not have standards that actually work?

                          • 10. Re: Bad font render on PC
                            Cozmicone Level 4

                            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.

                            • 11. Re: Bad font render on PC
                              AdeptDigital Level 2

                              I just replaced the AGaramond font with the EBGaramond webfont from Google.  We'll see if the client likes it.  I have to say its close, but still not exactly what the client was looking for.  We shall see what we get away with.




                              • 12. Re: Bad font render on PC
                                Nancy OShea Adobe Community Professional & MVP

                                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.

                                • 13. Re: Bad font render on PC
                                  AdeptDigital Level 2

                                  I think that the font manufacturers are starting to change their business model.  I don't know if I'm particularly dense or what but it seems that Google Fonts and Adobe Type server is moving the use of online fonts from the local server side files to fonts that are maintained to meet all browser compatibility requirements.  That way you need to subscribe to the online font databases, or maybe just use Google's, to stay easily up to date on all the font changes that are made either by the authors of the browser or the by the manufacturers of the fonts.


                                  If your goal is to make money off the art of drawing and developing fonts this seems a pretty clever way to do it.  It also moved the administration of fonts to a different location.  I guess its foolish to think that Adobe or Google may drop those divisions and strand all those web sites into default font land.  If the unthinkable happens and Google or Adobe go out of business we will have a lot of work to do.


                                  Thanks for the list but I think I will just surrender to the business model and try it with the hosted fonts.  Seems like it takes care of some problems and you get the first ones free.  I'll just have to set up my clients with the free fonts from Google or the free ones on Adobe.

                                  • 14. Re: Bad font render on PC
                                    Nancy OShea Adobe Community Professional & MVP

                                    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.



                                    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.

                                    1 person found this helpful
                                    • 15. Re: Bad font render on PC
                                      AdeptDigital Level 2

                                      Just toured the Edge web fonts.  It looks like a limited selection unless you join up with the Typekit but a good start.  TYVM