Как правильно подключать шрифты для сайта

Добрый день, друзья. Сегодня хочу рассказать вам о том, как подключить правильно подключать шрифты к сайту при помощи CSS.

Недавно я описывал способ подключения шрифтов при помощи сервиса google fonts, но там мы были ограничены тем набором, который предлагает Google, а теперь можно будет использовать любой имеющийся у вас шрифт.

В своей статье я буду использовать бесплатный шрифт, так как стараюсь быть честным с самого начала своей работы в интернете. Большинство привлекательных шрифтов платные, так что, если у вас крупная компания, будьте аккуратны с лицензионным соглашением. Давайте приступим...

Конвертация шрифтов

Подключение шрифтов к сайту, на самом деле, не такое уж и сложное занятие. Но проблема возникает в том, что разным браузерам необходимы разные форматы шрифтов.

Так, одни понимает "woff", другой "ttf", а третьему "eof" подавай. Поэтому, если заказчик серьезный, то он передает на верстку макет и прилагает все форматы шрифтов, но это бывает очень редко. И нам, верстальщикам, зачастую, приходится самим выкручиваться из ситуации.

В начале своей работы в интернете для меня это было существенной проблемой, и я искал все форматы одного и того же шрифта вручную, но потом наткнулся на сервисы, конвертирующие из одного формата, во все необходимые для Web(а). Например:

• onlinefontconverter.com,
• fontsquirrel.com,
• font2web.com

То есть, они позволяют загрузить один формат шрифта и на его основе сгенерировать дополнительные.

Я, обычно, пользуюсь первым, поэтому и пример покажу на основе него. У меня есть бесплатный шрифт lazer84 [RUS by Daymarius]. Предположим, что я хочу использовать его на сайте, но у меня он есть только в формате ttf.

Первым делом, давайте назовем его осмысленно, ведь после скачивания он назывался "12236". Я переименую его в lazer, так будет удобнее с ним работать.

Теперь, давайте перейдем на сайт "onlinefontconverter" и выбираем необходимые форматы.

Затем жмем "select font(s)" и выбираем шрифт, которые хотим сконвертировать в указанные форматы. После загрузки жмем "Done", затем "Save your font" и "Download attachment".

Начнется скачивание архива.

Иногда, может возникнуть ошибка. В таком случае просто повторите процедуру.

Распакуйте архив и переместите шрифты в свой проект. Обычно, это папка "fonts".

Как видите, не все форматы получили такое же имя, которое мы задали немного ранее. Давайте переименуем.

Теперь займемся подключением к сайту. Откройте CSS-файл, который подключен к проекту и в самом начале подключите шрифты следующим образом.

Для более удобного копирования, вот код:

@font-face {
  font-family: 'lazer';
  src: url('../fonts/lazer.eot');
  src: url('../fonts/lazer.woff2') format('woff2'),
       url('../fonts/lazer.eot?#iefix') format('embedded-opentype'),
       url('../fonts/lazer.woff') format('woff'),
       url('../fonts/lazer.ttf') format('truetype'),
       url('../fonts/lazer.svg#lazer') format('svg');
  font-weight: normal;
  font-style: normal;
}

В "font-family" придумали удобное для подключения имя. В моем случае я так и оставил "lazer", теперь в любом месте, где понадобится использование этого шрифта, нужно просто указать его имя.

Пример работы:

Если по какой-то причине шрифт не применился, то в первую очередь проверьте пути подключения. В 99% случаев проблема именно в этом.

На этом - все. Вот так просто подключить свои шрифты при помощи CSS. Но будьте внимательны, иногда они могут очень много весить, и тогда сайт будет грузиться намного дольше. Внимательно следите за этим показателем.