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

    Bad font render on PC

    AdeptDigital Community Member

      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;

        • 1. Re: Bad font render on PC
          AdeptDigital Community Member

          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 CommunityMVP

            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 Community Member

              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 Community Member

                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 CommunityMVP

                  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 Community Member

                    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

                    • 7. Re: Bad font render on PC
                      AdeptDigital Community Member

                      No we are both on Windows 7

                      • 8. Re: Bad font render on PC
                        AdeptDigital Community Member

                        @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 Community Member

                          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 Community Member

                            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 Community Member

                              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.

                               

                              Thanks,

                              Brett

                              • 12. Re: Bad font render on PC
                                Nancy O. CommunityMVP

                                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 Community Member

                                  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 O. CommunityMVP

                                    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.

                                    • 15. Re: Bad font render on PC
                                      AdeptDigital Community Member

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