Как осуществить подключение нескольких шрифтов в css?

Question

[Nikita]

Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.

Почти все из них используются на странице. Вопрос вот в чем, если мне нужно подключить три файла из двенадцати или более, как должна выглядеть запись в @font-face?

@font-face {
    font-family: BeauSans; 
    src: url(fonts/PFBeauSansPro-Black.ttf); 
}

/*И повторяем этот кусок кода изменяя гарнитуру и имя файла*/

/*Либо можно использовать такой вариант?*/
@font-face {
    font-family: BeauSans; 
    src: url(fonts/PFBeauSansPro-Black.ttf);
    src: url(fonts/PFBeauSansPro-BlackItalic.ttf);  
    src: url(fonts/PFBeauSansPro-BlackItalic.ttf); 
    /*И так далее.....*/
}

Как будет правильно?

Answer 1

[Константин Величко]

@font-face {
font-family: "PT Serif";
  src: url("../fonts/ptserif-normal.eot");
  src: local('☺'), 
  url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-normal.woff") format("woff"),
  url("../fonts/ptserif-normal.ttf") format("truetype"), 
  url("../fonts/ptserif-normal.svg#PT Serif") format("svg");

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-bold.eot");
  src: local('☺'), 
  url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-bold.woff") format("woff"), 
  url("../fonts/ptserif-bold.ttf") format("truetype"), 
  url("../fonts/ptserif-bold.svg#PT Serif") format("svg");

  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-italic.eot");
  src: local('☺'), 
  url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-italic.woff") format("woff"), 
  url("../fonts/ptserif-italic.ttf") format("truetype"), 
  url("../fonts/ptserif-italic.svg#PT Serif") format("svg");

  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-bolditalic.eot");
  src: local('☺'), 
  url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-bolditalic.woff") format("woff"), 
  url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
  url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");

  font-weight: bold;
  font-style: italic;
}

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Подробнее смотрите на caniuse.com

Хорошая статья на эту тему nicothin.pro/page/web-fonts

@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.woff2') format('woff2'), 
       url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
       url('webfont.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}

Comments

[Владислав Алеев]

Если верить гуглу, то Medium - 500, а SemiBold - 600

[Константин Величко]

Владислав Алеев это не так важно, как захотите так и будет. И у разных шрифтов по разному, зависит от разработчика шрифта

[Степан Даващеневопрос]

а что за смайлик?( в local

[Константин Величко]

Хак. Сейчас так подключать шрифты не нужно. Достаточно woff и woff2

Answer 2

[Freddi]

отдельно и добавлять font-style, font-weight, смотря что надо.

@font-face {
    font-family: BeauSans; 
    src: url(fonts/PFBeauSansPro-Black.ttf);
    font-style: normal;
}
@font-face {
    font-family: BeauSans; 
    src: url(fonts/PFBeauSansPro-BlackItalic.ttf);
    font-style: italic;
}

Comments

[Krickt]

@mfred font-weight, font-style не добавляйте, лучше называйте по-разному. В Safari, к примеру, шрифт меняется на жирный + добавляется полужирность, получается некрасиво.