@andreyWayne

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

Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то...
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!
  • Вопрос задан
  • 21010 просмотров
Решения вопроса 1
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Конвертер в другие форматы: 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;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы