Utilisez plusieurs règles @ font-face en CSS

Remarque, Vous pouvez également être intéressé par:

Police Web personnalisée ne fonctionne pas dans IE9

Qui comprend une ventilation plus descriptive du CSS que vous voyez ci-dessous (et explique les réglages qui le font fonctionner mieux sur 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;
}

Et vos questions de suivi:

Q. je voudrais utiliser une police telle que "Bumble bee", par exemple. Comment puis-je utiliser @font-face pour rendre cette police disponible sur ordinateur?

Note que je ne sais pas quel est le nom de votre police ou fichier Bumble Bee, ajustez-le en conséquence, et que la déclaration font-face doit précéder (précéder) votre utilisation, comme je l'ai montré ci-dessus.

Q. puis-je encore utiliser d'autres @font-face caractères "GestaRegular" ainsi? Puis-je utiliser les deux dans la même feuille de style?

Il suffit de les énumérer ensemble comme je l'ai montré dans mon exemple. Il n'y a aucune raison que vous ne puissiez pas déclarer les deux. Tout ce que @font-face fait est de demander au navigateur de téléchargez et mettez à disposition une famille de polices. Voir: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights