¿Utiliza varias fuentes personalizadas con @ font-face?

Question

Estoy seguro de que me estoy perdiendo algo realmente directo. Estado usando una sola fuente personalizada con la cara de fuente normal:

@font-face { 
    font-family: CustomFont; 
    src: url('CustomFont.ttf'); 
} 

Todo funciona bien cuando lo uso, pero si quiero añadir otra fuente personalizada, ¿qué hago? Intenté separar por comas el siguiente o agregar una cara de fuente completamente distinta, pero no puedo hacer funcionar la segunda fuente.

Answer 1

Sólo tiene que añadir otro @font-face regla:

@font-face { 
    font-family: CustomFont; 
    src: url('CustomFont.ttf'); 
} 

@font-face { 
    font-family: CustomFont2; 
    src: url('CustomFont2.ttf'); 
} 

Si su segunda fuente todavía no funciona, asegúrese de que está deletreando su nombre de la fuente y el nombre del archivo correctamente, sus memorias caché del navegador se están comportando, su El sistema operativo no se está metiendo con una fuente del mismo nombre, etc.

Answer 2

Consulte fontsquirrel. Tienen un generador de fuentes web, que también escupirá una hoja de estilo adecuada para su fuente (busque "@ font-face kit"). Esta hoja de estilo se puede incluir en el suyo, o puede usarla como plantilla.

Answer 3

Puede usar múltiples caras de fuente con bastante facilidad. A continuación se muestra un ejemplo de cómo he usado en el pasado:

<!--[if (IE)]><!--> 
    <style type="text/css" media="screen"> 
     @font-face { 
      font-family: "Century Schoolbook"; 
      src: url(/fonts/century-schoolbook.eot); 
     } 
     @font-face { 
      font-family: "Chalkduster"; 
      src: url(/fonts/chalkduster.eot); 
     } 
    </style> 
<!--<![endif]--> 
<!--[if !(IE)]><!--> 
    <style type="text/css" media="screen"> 
     @font-face { 
      font-family: "Century Schoolbook"; 
      src: url(/fonts/century-schoolbook.ttf); 
     } 
     @font-face { 
      font-family: "Chalkduster"; 
      src: url(/fonts/chalkduster.ttf); 
     } 
    </style> 
<!--<![endif]--> 

Vale la pena señalar que las fuentes pueden ser divertidos a través de diferentes navegadores. La fuente de los navegadores anteriores funciona, pero necesita usar archivos eot en lugar de ttf.

Es por eso que incluyo mis fuentes en el encabezado del archivo html ya que puedo usar etiquetas IE condicionales para usar los archivos eot o ttf en consecuencia.

Si usted necesita para convertir TTF a EOT para este fin hay un sitio web brillante puede hacer esto por línea gratis, que se puede encontrar en http://ttf2eot.sebastiankippe.com/.

Espero que ayude.

Answer 4

Si está teniendo un problema con la fuente de trabajo también he tenido esto en el pasado y el problema que encontré se debió a font-family: nombre. Esto tenía que coincidir con el nombre de la fuente que realmente se le dio.

La manera más fácil que encontré para descubrir esto fue instalar la fuente y ver qué nombre para mostrar se da.

Por ejemplo, estaba usando Gill Sans en un proyecto, pero la fuente real se llamaba Gill Sans MT. El espaciado y la capitulación también fueron importantes para hacerlo bien.

Espero que ayude.

Answer 5

que utiliza este método en mi archivo css

@font-face { 
    font-family: FontName1; 
    src: url("fontname1.eot"); /* IE */ 
    src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */ 
} 
@font-face { 
    font-family: FontName2; 
    src: url("fontname1.eot"); /* IE */ 
    src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */ 
} 
@font-face { 
    font-family: FontName3; 
    src: url("fontname1.eot"); /* IE */ 
    src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */ 
}