@andreyWayne

Как подключить локальный шрифт .ttf в css?

Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то...
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!
  • Вопрос задан
  • 1305 просмотров
Решения вопроса 1
Odisseya
@Odisseya
WebDev
Конвертер в другие форматы: onlinefontconverter.com
Подключить можно таким кодом (в т.ч. для браузеров-динозавров):
@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.eot');                                    /* IE9 Compat Modes */ 
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
       url('webfont.woff2') format('woff2'),                  /* Новейшие браузеры */ 
       url('webfont.woff') format('woff'),                    /* Новые браузеры и IE9+ */ 
       url('webfont.ttf')  format('truetype'),                /* Старые Safari, Android, iOS */ 
       url('webfont.svg#svgFontName') format('svg');          /* Древние Safari, iOS, Android */ 
  font-weight: normal; 
  font-style: normal; 
}

Обычно достаточно:
@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; 
}

Форматы WOFF и WOFF2 — это контейнер с более эффективным, чем ttf сжатием шрифта, как следствие шрифт грузится скорее. Там, где нужно использовать шрифт укажите правило: «font-family: 'Web font'; »
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@3dben
/* font-family: "RobotoRegular"; */
@font-face {
	font-family: "RobotoRegular";
	src: url("../fonts/RobotoRegular/RobotoRegular.eot");
	src: url("../fonts/RobotoRegular/RobotoRegular.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoRegular/RobotoRegular.woff") format("woff"),
	url("../fonts/RobotoRegular/RobotoRegular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Smart Group Москва
от 100 000 руб.
КАУС Москва
от 120 000 до 180 000 руб.
SaveTime Москва
от 140 000 до 200 000 руб.
21 окт. 2018, в 17:05
5000 руб./за проект
21 окт. 2018, в 16:38
50000 руб./за проект