Century Gothic Font Usablility Question

Question

Over the past few days, Ive asked a few questions to solve my font problem. I was using a variety of obscure fonts for my design. I was using @font-face, and trying to figure out ways of making my backup fonts in the family change size if they were used. It has been way too complicated, and I have decided to simplify things and use a more popular set of fonts in my family.

font-family:Century Gothic,arial,sans-serif;

I have chosen to use Century Gothic as my primary font (which I thought was standard on most computers). After much testing, most browsers are using a sans-serif font in most computers.

Here is the site: http://www.vitaminjdesign.com

A few questions:

1- is my site showing up as century Gothic or sans serif?

2- is century Gothic specific to a certain OS?

3- is there any improvements in the css that could load century gothic (possibly different filenames/font names for the same font?) Do I need it in quotes too?

Thanks, and sorry its a departure from the normal S.O. programming question.

Answer 1

Most computers I have run across do not have Century Gothic; pick a few more that the site looks decent in.

Answer 2

You should wrap the font name in quotes. If "Century Gothic" isn't available, the browser will fallback on a sans-serif font.

If you want to ensure "Century Gothic" is used, perhaps you should consider something like sIFR which is often used to replace headers with flash elements using specific fonts. I personally wouldn't go this route.

As you stated in your comment, the best option (in my opinion) is to simply specify a fallback font that you are happy with.

Answer 3

1- is my site showing up as century Gothic

No.

or sans serif?

Yes.

2- is century Gothic specific to a certain OS?

No, it's not included in any OS. It is often installed by MS Office.

3- is there any improvements in the css that could load century gothic

You could use @font-face embedding to have recent browsers download and use the font. Unfortunately this isn't allowed for in the usual Monotype license; you'd have to get a special embedding license. Which may not even exist for that font.

(possibly different filenames/font names for the same font?)

No, the Monotype edition is the only variant I'm aware of.

If you are set on a geometric sans, you could try including Futura ("Futura", "Futura Std", "Futura LT Medium", "Futura Md BT", "Futura No 2"), Avenir ("Avenir Medium", "Avenir 55 Roman", "Avenir Next LT Pro"), or even Avant Garde in desperate times. But none of these, or any other geometric, are bundled with operating systems, so you have a pretty small chance of it working.

Do I need it in quotes too?

Yes.

Answer 4

You're right in that by choosing a longer list of fonts, you'll have more control over the look and feel of your website. Font rendering is usually controlled by the OS, and OSs typically have a font substitution table it uses when an application calls for a specific font to display content and that font is not available on a user's system.

Your best bet is to do some research on fonts and see which ones (and which variations and close copies) tend to be installed on computers with different operating systems or with common applications. If you find variation on the name of Century Gothic, it should not hurt to put them all in the font string (in quotes, of course, if there's a space in the name).

P.S. Hate the fade-in on your website. Hate it on the Google home page too. Makes me wait to read or click.

Answer 5

Or you can go the @font-face path but use a free font. These are all free and look like Century Gothic:

Nevis

PT Sans

Walkway (family)

Caviar Dreams

Cicle (family)

Kozuka Gothic Pro L (Kozuka is a family)

You can find them in dafont.com, fontsquirrel.com, and other similar sites.