Use multiple @font-face rules in CSS

Question

How can I use more than @font-face rule in my CSS?

I've inserted this into my stylesheet:

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

This currently only applies for the whole body of text on the site. But, I would like to specify h1 to use a different font. How can I do this?

Answer 1

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

Answer 2

Note, you may also be interested in:

Custom web font not working in IE9

Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on 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; } 

---

And your follow-up questions:

Q. I would like to use a font such as "Bumble bee," for example. How can I use @font-face to make that font available on the user's computer?

Note that I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I've shown above.

Q. Can I still use the other @font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?

Just list them together as I've shown in my example. There is no reason you can't declare both. All that @font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights