¿Usar múltiples fuentes personalizadas usando @font-face?

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

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

Todo funciona bien cuando lo uso, pero si quiero agregar otra fuente personalizada, ¿qué hago? He intentado separar por coma la siguiente o agregar otra fuente entera, pero no puedo hacer que la segunda fuente funcione.

Author: BoltClock, 2011-08-11
Source

5 answers

Simplemente agrega otra @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 tipo de letra y su nombre de archivo correctamente, las cachés de su navegador se están comportando, su sistema operativo no está jugando con una fuente del mismo nombre, etc.

 99
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-06 15:07:11

Si tiene un problema con el funcionamiento de la fuente, también lo he tenido en el pasado y el problema que encontré se debió a la familia de fuentes : nombre. Esto tenía que coincidir con el nombre de la fuente que realmente se dio.

La forma más fácil que encontré para averiguar 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 fue importante para obtener derecho.

Espero que eso ayude.

 7
Author: Adam Stacey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-10 22:28:01

Echa un vistazo a 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 estilos se puede incluir en la suya, o puede usarla como plantilla.

 5
Author: tdammers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-10 22:15:14

Puede usar múltiples caras de fuente con bastante facilidad. A continuación se muestra un ejemplo de cómo lo usé 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 divertidas en diferentes navegadores. Font face en navegadores anteriores funciona, pero necesita usar archivos eot en lugar de ttf.

Es por eso que incluyo mis fuentes en la cabeza del archivo html, ya que luego puedo usar etiquetas IE condicionales para usar archivos eot o ttf en consecuencia.

Si necesita convertir ttf a eot para este propósito, hay un brillante sitio web usted puede hacer esto de forma gratuita en línea, que se puede encontrar en http://ttf2eot.sebastiankippe.com/.

Espero que eso ayude.

 3
Author: Adam Stacey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-10 22:22:24

Uso 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 */
}
 3
Author: 5ulo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-06 15:07:43