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