Задать вопрос
FranklinDKitamory
@FranklinDKitamory
Frontend junior
css

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

Попалась верстка макета к которому прилагается аж 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); 
    /*И так далее.....*/
}


Как будет правильно?
  • Вопрос задан
  • 71399 просмотров
Комментировать
Подписаться 15 Оценить Комментировать
Решения вопроса 2
Zoxon
@Zoxon
Веб-разработчик 
@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; 
}
Ответ написан
4 комментария
4 комментария
@mfred
отдельно и добавлять 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;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать нейросеть
02 мая 2024, в 06:11
30000 руб./за проект
Автоматизация отчетности сектора подбора и развития персонала в 1С
02 мая 2024, в 05:49
7000 руб./за проект
Изменение темы сайта на ghost cms
02 мая 2024, в 04:47
5000 руб./за проект
Ещё заказы