Usar varias reglas @ font-face en CSS

Question

¿Cómo puedo usar más de @font-face regla 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'); 
} 

este momento, sólo se aplica para todo el cuerpo de texto en el sitio. Pero, me gustaría especificar h1 para usar una fuente diferente. ¿Cómo puedo hacer esto?

Answer 1

nota, también puede estar interesado en:

Custom web font not working in IE9

¿Qué incluye un desglose más descriptivo de la CSS que aparece a continuación (y se explican 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 utilizar una fuente como "Abejorros", por ejemplo. ¿Cómo puedo usar @font-face para hacer que la fuente esté disponible en la computadora del usuario ?

Tenga en cuenta que no sé cuál es el nombre de su fuente o archivo Bumble Bee, ajústelo y que la declaración de la fuente debe preceder (antes) a su uso, ya que ' ve mostrado arriba.

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

Simplemente agréguelos como lo he mostrado en mi ejemplo. No hay ninguna razón por la que no puedas declarar ambos. Todo lo que hace el @font-face es indicar al navegador que descargue y hacer disponible una familia de fuentes. Ver: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

Answer 2

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