Разнообразие шрифтов сегодня позволяет оформить сайт на любой вкус. Очень просто подключить шрифт к сайту позволяет сервис гугл фонтс. Однако даже этот мощный сервис иногда не помогает, так как некоторые типы шрифтов пока еще отсутствуют в этом сервисе. Хотя, к чести Гугла, хочу заметить, что коллекция шрифтов, доступных для подключения к сайту, постоянно расширяется.
Поэтому иногда приходится использовать иные пути подключения шрифта к сайту. Например, можно скачать шрифт в одной из бесплатных онлайн библиотек шрифтов, загрузить файл шрифта к себе на хостинг и сделать соответствующую запись в файле стилей.
Как правило, к скачиванию доступны файлы шрифтов в формате ttf. Здесь http://htmlbook.ru/blog/svoi-shrift-na-stranitse можно увидеть, что этот формат считается на сегодня самым читаемым современными браузерами.
Поэтому в большинстве случаев достаточно загрузить к себе на хостинг скачанный файл шрифта в формате ttf и подключить его к своему сайту таким образом:
@font-face {
font-family: 'Arial Narrow Bold';
src: url('../fonts/ArialNarrowBold.ttf') format('truetype');
}
Большинства современных браузеров способны читать шрифт и в формате woff или woff2. Поэтому скачанный шрифт в формате ttf можно сконвертировать в woff и woff2 на одном из онлайн конвертеров шрифтов и в качестве дополнительных их загрузить к себе на хостинг.
Хочу заметить, что до недавних пор приходилось конвертировать дополнительные форматы шрифта — svg, eot и otf, так как разные браузеры корректно отображали шрифт только в одном из указанных форматов. Сегодня, к счастью, такой большой набор форматов шрифтов уже не нужен, так как форматы ttf’, woff и woff2 читаются абсолютным большинством современных браузеров. Поэтому на сегодняшний день достаточно подключить только этих три формата.
Вот пример подключения шрифта к сайту:
@font-face {
font-family: 'Arial Narrow Bold';
src: url('../fonts/ArialNarrowBold.woff2') format('woff2'),
url('../fonts/ArialNarrowBold.ttf') format('truetype'),
url('../fonts/ArialNarrowBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
В данном случае происходит подключение шрифта из отдельной папки fonts, расположенной на вашем хостинге.
Хочу сделать одно важное замечание. К скачиванию в онлайн библиотеках шрифтов доступно много коммерческих шрифтов, которые разрешается бесплатно использовать только на сайтах, не приносящих доход ни в каком виде. К этой категории относится, например, шрифт Arial Narrow Bold, указанный в моем примере.
Если же шрифт планируется использовать на коммерческом сайте, стоит приобрести лицензию.
Конечно же, последнее замечание — это чисто для вашей совести))
P.S. Все же актуальным еще остается формат шрифта .eot — это для версий ИнтернетЭксплорера (IE) 8 и ниже. Его подключение имеет некоторую особенность — он подключается дважды (для разных версий ИЕ). И выглядит это так:
@font-face {
font-family: 'Arial Narrow Bold';
src: url('../fonts/ArialNarrowBold.eot');
src: url('../fonts/ArialNarrowBold.eot?') format('embedded-opentype'),
url('../fonts/ArialNarrowBold.ttf') format('truetype');
}
Обращаю внимание, что именно в таком порядке рекомендуется подключать шрифт для IE