¿Cómo admitir la fuente ITC Avant Garde o reemplazarla para web?

Estoy codificando el rediseño (css+html) para una aplicación web en India donde mi artista diseñó una maqueta para que la codifique. Ahora me pregunto cómo puedo ajustar una fuente "ITC Avant Garde" para que se parezca lo más posible al boceto original. ¿Está disponible ITC Avant Garde como fuente web o debo aproximarme con algo más? ¿Está disponible tanto con el libro de pesos de fuente como con el medio? Mi CSS lo define de la siguiente manera. ¿Se ve bien?

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;
}

El diseño original de la maqueta es este.

ingrese la descripción de la imagen aquí

Mi código ahora lo muestra de manera similar, pero no es perfecto.

ingrese la descripción de la imagen aquí

Respuestas (1)

Hoy en día, prácticamente puede usar cualquier fuente que desee como fuente web incrustando la fuente en su CSS y sitio web.

Los sitios populares como Font Squirrel le brindan kits de fuentes web listos para implementar en su sitio web, mientras que otras personas optan por servicios en línea como Google Fonts o Adobe Typekit , que le permiten incrustar fuentes populares en su sitio web con facilidad.

En cualquier caso, ITC Avant Garde está disponible para su compra como fuente web a través de MyFonts y sería muy fácil para usted implementarlo en su CSS.

Dicho esto, en mi opinión, deberías optar por las fuentes de Google que ya están en uso y son gratuitas. Son bonitos y rápidos de cargar. Además, con respecto a su CSS, su font-familyregla parece demasiado larga y contempla muchos casos muy específicos . Deberías ir por algo como esto:

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

No hay necesidad de tantos casos que rara vez sucederán.

Por último, puede comprimir sus reglas font-familyy con la abreviatura de fuente , explicada aquí por Chris Coyier line-height.font-size