Search code examples
cssfontswebfonts

font-family: Garamond, sans-serif; won't always produce sans serif font face, why?

I have a website where I've set the global font face to be font-family: Garamond, sans-serif;. I've read online that Garamond is a "web safe type face". I'm in doubt about that now given that on some operating systems this Garamond isn't rendered without serifs.

We ended up investigating and concluded that e.g. on some Windows distributions, the default Garamond type face simply contains serifs. So my website ends up looking quite different on varying operating systems. Examples below:

sans serif Garamond enter image description here

Now, I'd just like to use Garamond when it's available as sans-serif font on the OS, or else wise I want to fall back on another sans-serif font. I never want to render a serif-based font face. Is that possible without including a third-party font? Are others aware of this "bug" or "confusion". What's the deal here?

<!doctype html>
<html>
  <head>
    <style>html,body { font-family: Garamond, sans-serif }</style>
    <meta charset="utf-8"/>
    <title></title>
  </head>
  <body>bla
  </body>
</html>
Solution

  • As Alochi said, Garamond is a serif typeface. Your second pic is what Garamond is supposed to look like. The computer for your first pic did not have Garamond installed, so it used "sans-serif" (in this case, Arial) instead.

    Garamond is not distributed with any Windows version. It is included with Microsoft Office, which is why many Windows PCs have it.

    Any computer, with any OS, that has Garamond will give you a serif font, so if you don't want serifs, you must not call for Garamond.