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:
src: url('fonts/AGaramond-Regular.eot?#iefix') format('embedded-opentype'),
font-family: 'AGaramond_Regular', Geneva;
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:
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.
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.
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?
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.
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.
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.
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...