How to support the font ITC Avant Garde or replacement for web?

Question

I'm coding the redesign (css+html) for a webapp in India where my artist designied a mockup for me to code. I now wonder how I can adjust a font "ITC Avant Garde" to make it look as close to the original sketch as possible. Is ITC Avant Garde available as a web font or must I approximate it with something else? Is it available with both font-weights book and medium? My CSS defines it as follows. Does it look ok?

body {
    background-color: rgb(255, 255, 235);
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: rgb(0, 0, 0);
    height: 100%;
    text-align: center;
    background-position: initial initial;
    background-repeat: initial initial;
}

The original mockup design is this

My code now displays it similar, but its not perfect.

Answer 1

Nowadays you can practically use any font you wish as a webfont by embedding the font into your CSS and website.

Popular sites like Font Squirrel give you webfont kits ready to implement in your website, while other people go for online services like Google Fonts or Adobe Typekit, which allow you to embed popular fonts in your website with ease.

In any case, ITC Avant Garde is available for purchase as a webfont through MyFonts and it would be very easy for you to implement it in your CSS.

That being said, in my opinion you should go for Google Fonts that are already in use and free. They're nice looking, and quick to load. Also, regarding your CSS, your font-familyrule seems way to long, and contemplating many very specific cases. You should go for something like this:

font-family: 'Your Typeface Family', sans-serif;

There's no need for so many cases which will rarely happen.

Lastly, you can compress your font-family, line-height and font-size rules with the font shorthand, explained here by Chris Coyier.