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; }
Теперь сайт будет оформлен так, как было задумано в дизайне.