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

Question

[andreyWayne]

Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то...
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!

Answer 1

[Odisseya]

Конвертер в другие форматы: 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'; »

Answer 2

[Super Star]

/* 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;
}

Comments

[andreyWayne]

вместо робото прописать свой шрифт?

[Super Star]

andreyWayne, ну да =)

Только ты же понял что /fonts(это папка)/RobotoRegular(это тоже папка)/RobotoRegular.eot(а это уже сам файл шрифта)