| ttf (TrueType) | Наиболее распространённые форматы, воспринимаемые многими конвертерами, что позволяет легко получить недостающие форматы шрифтов. |
| otf (OpenType PostScript) | |
| woff (Web Open Font Format) | Как можно догадаться из названия, это формат именно для того, чтобы в будущем не было проблем с поддержкой разных форматов шрифтов. Поддерживается многими современными браузерами. |
| svg (Scalable Vector Graphics) | Этот формат используется для iOS |
| eot (Embedded OpenType)) | Исключительный, специальный (как всегда) формат для браузера Internet Explorer |
Этого набора форматов будет достаточно, чтобы ваш текст выглядел одинаково во всех популярных браузерах. Если у вас нет какого то формата, то помогут просторы интернета и всевозможные онлайн конвертеры шрифтов, вроде этого - fontsquirrel
Некоторые шрифты можно найти на ресурсе Google Web Fonts - данный сервис позволит автоматически сгенерировать код для подключения шрифтов. Если вам нужна поддержка кирилицы, не забудьте выбрать соответствующий фильтр.
Итак, вы скачали нужные шрифты, сконвертировали недостающие форматы и теперь осталось только подключить шрифты. Скопируйте все шрифты на сервер и в начале файла .css для вашего сайта пропишите объявление шрифтов следующим образом:
@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.otf");
}
@font-face {
src: url('../fonts/eurofontc.eot'); /* IE9 */
src: url('../fonts/eurofontc.eot?') format('eot'), /* IE6-IE8 */
}
@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.woff");
}
@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.svg");
}
@font-face {
font-family: "eurofontc";
src: url("../fonts/eurofontc.ttf");
}
Разумеется у вас будет свой путь до файлов шрифтов. Далее в стилях можно будет использовать ваш шрифт привычным способом, например так:
body {
color: #ccc;
font-family: eurofontc;
font-size: 18px;
}
Теперь сайт будет оформлен так, как было задумано в дизайне.
