Usar varias reglas @font-face en CSS

¿Cómo puedo usar más de la regla @font-face en mi CSS?

He insertado esto en mi hoja de estilo:

body {
    background: #fff url(../images/body-bg-corporate.gif) repeat-x;
    padding-bottom: 10px;
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'GestaReFogular';
    src: url('gestareg-webfont.eot');
    src: local('☺'),
         url('gestareg-webfont.woff') format('woff'),
         url('gestareg-webfont.ttf') format('truetype'),
         url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

Esto actualmente solo se aplica a todo el cuerpo del texto en el sitio. Pero, me gustaría especificar h1 para usar una fuente diferente. ¿Cómo puedo hacer esto?

Author: DavidRR, 2011-02-02
Source

2 answers

Tenga en cuenta que también puede estar interesado en:

Fuente web personalizada no funciona en IE9

Que incluye un desglose más descriptivo del CSS que se ve a continuación (y explica los ajustes que hacen que funcione mejor en IE6-9).

@font-face {
  font-family: 'Bumble Bee';
  src: url('bumblebee-webfont.eot');
  src: local('☺'), 
       url('bumblebee-webfont.woff') format('woff'), 
       url('bumblebee-webfont.ttf') format('truetype'), 
       url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
  font-family: 'GestaReFogular';
  src: url('gestareg-webfont.eot');
  src: local('☺'), 
       url('gestareg-webfont.woff') format('woff'), 
       url('gestareg-webfont.ttf') format('truetype'), 
       url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

body {
  background: #fff url(../images/body-bg-corporate.gif) repeat-x;
  padding-bottom: 10px;
  font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

Y sus preguntas de seguimiento:

P. me gustaría usar una fuente como "Bumble bee", por ejemplo. ¿Cómo puedo usar @font-face para hacer que esa fuente esté disponible en el ¿computadora?

Nota que no se cual es el nombre de su fuente o archivo Bumble Bee, así que ajuste en consecuencia, y que la declaración font-face debe preceder (venir antes) a su uso, como he mostrado arriba.

P. ¿Puedo seguir usando el otro tipo de letra @font-face "GestaRegular" también? ¿Puedo usar ambos en la misma hoja de estilo?

Solo liste juntos como he mostrado en mi ejemplo. No hay razón para que no puedas declarar ambos. Todo lo que @font-face hace es indicar al navegador descargue y haga que una familia de fuentes esté disponible. Véase: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

 77
Author: Jared Farrish,
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
2017-08-22 16:47:51 
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Regular.otf);
    font-weight: normal;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Bold.otf);
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-size:2em;
    margin:0;
    padding:0;
    font-family:Kaffeesatz;
    font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }
 4
Author: Surya R Praveen,
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
2018-02-09 12:05:55