Используйте несколько правил @ font-face в CSS

Обратите внимание, вас также могут заинтересовать:

Пользовательский веб-шрифт не работает в IE9

Это включает более описательную разбивку CSS, которую вы видите ниже (и объясняет настройки, которые улучшают его работу в 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;
}

И ваши дополнительные вопросы:

Q. Я хотел бы использовать, например, шрифт, такой как "Bumble bee". Как я могу использовать @font-face, чтобы сделать этот шрифт доступным на компьютере пользователя?

Обратите внимание, что я не знаю, как называется ваш шрифт или файл Bumble Bee, поэтому настройте его соответствующим образом, и что объявление font-face должно предшествовать (предшествовать) вашему использованию, как я показал выше.

Q. Могу ли я по-прежнему использовать другой @font-face шрифт "GestaRegular"? Могу ли я использовать оба в одной таблице стилей?

Просто перечислите их вместе, как я показал в моем примере. Нет причин, по которым вы не можете декларировать и то, и другое. Все, что делает @font-face, - это указывает браузеру загрузить и сделать семейство шрифтов доступным. См .: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

Можно объявить несколько вариантов семейства шрифтов, изменив свойство font-weight и src правила @ font-face.

/* Regular Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.ttf");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;
}

Заявленные правила можно использовать, следуя

/* Regular */
font-family: Montserrat;


/* Semi Bold */
font-family: Montserrat;
font-weght: 600;

/* Bold */
font-family: Montserrat;
font-weight: bold;