Is Garamond really a web safe font?

Question

Is Garamond really web safe? Should I go ahead and use it? I know its not there in XP(Georgia is the fallback), however, what about other operating systems? Is it present in macs, new windows and linux?

I know I could simple do a @font-face, however, the if I embed it, it looks pretty hideous in Google Chrome.

EDIT

Okay, what if I do

@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
html{font-family: Garamond, EB Garamond, Georgia, serif;}

Will, this way the web browser will first check if Garamond is installed or not, and if not, load will load the web font EB Garamond, or this wont happen?

Solution 1

I don't believe it is a safe font to use on all computers. You can use the font and use another as a backup by using font family. Such as this:

font-family:Garamond, Georgia, serif;

See here for more reading on web safe fonts -> http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Solution 2

Other than a very short list, you should not rely on everyone having the various font families on their computers.

Instead, try out Google WebFonts. In fact, use the search box on the left to find their Garamond equivalent. Works in all browsers (including older IE!) and looks great everywhere.

EDIT

Regarding your additional question, yes, the browser will look for the fonts in the order that you specify them, so putting "Garamond" before "EB Garamond" will show Garamond if available in the user's computer.

Solution 3

For a font to look consistently good across platforms at small sizes it must be hinted well - otherwise it will only look good on those platforms which default to very soft, lightly hinted font smoothing for everything, like Mac - and it'll look terrible on Windows, which will apply strongest hinting and try to make them look really crisp, which really needs the hinting built into the font to be good to work well.

EB Garamond is a free reproduction of Garamond which has an impressive range of glyphs but pays virtually no attention to on-screen rendering - consequently its lack of decent hinting will ensure it looks terrible at small sizes on certain platforms, particularly Windows. While Vista/7/8 improves font rendering somewhat, it only does so in some applications - others, particularly Google Chrome, uses the old font rendering. Edit August 2015 - this is no longer true of Google Chrome.

There are other versions of Garamond out there, probably the best IMHO being Adobe Garamond. Being a commercial font you would need a special license to be allowed to embed it in a web page. Some font foundries sell these, some don't - you just need to read their license :) But if you get that, you may find that they are much better hinted. I can't guarantee it though (but some font stores will allow you to see a preview of a browser-rendered font in certain browsers).

But if you are limiting yourself to free fonts available from Google web fonts, I'd count EB Garamond out for body text, mainly just because of these issues.

Maybe specify "Adobe Garamond" as first, as a few people may have that, but then fall back to fonts like Constantia, then Georgia, then just "serif". Note that Garamond and Constantia have a light stroke and a small x-height so will look a lot more "feint" than something like Georgia.

Solution 4

1) No, Garamond is not a web safe font.

2) Garamond is not recommended for usage on the web. See this article: Why you don't use Garamond on the Web

3) Recommendation: use Georgia for headings and Verdana for body text. They are both web safe and are tried and proven to work very well together.

If you want to stick with EB Garamond, Google Fonts recommends pairing it with Lobster.

Writing the code:

@import url('https://fonts.googleapis.com/css?family=Lobster|EB+Garamond');
h1, h2, h3, h4, h5, h6 {font-family: Lobster, cursive; }
p {font-family: 'EB Garamond', serif; }

View more solutions

Comments

[J D]

Yes, I did it, EB Garamond, but Chrome screws it big time, becomes kinda very messy.

[J D]

Yea, I was backing on Georgia. I tried using the Google version, EB Garamond, but looks bad on Chrome.

[takeshin]

@Sam Garamond is a serif font.

[J D]

Well, I really don't mind little differences in rendering across the respective platforms. By JavaScript Font API, do you mean Cufon? I don't like the non-selectable text very much. Also, can you please answer the EDIT part of my question?

[J D]

@takeshin Can you please answer the EDIT part of my question?

[Nick White]

I assume you're on windows? Chrome on mac (everything on mac) makes the fonts look fantastic. By the way, you should put quotes around font names that contain spaces. I bet most browsers will figure it out without quotes, but just in case.