Smartlanding

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

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

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

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

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

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

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

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

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

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

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

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

Правильное подключение шрифта при помощи CSS

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

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

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

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

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

Сконвертированные шрифты

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

Подключение шрифта при помощи css

Теперь займемся подключением к сайту. Откройте 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», теперь в любом месте, где понадобится использование этого шрифта, нужно просто указать его имя.

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

Smartlanding

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

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

Поделитесь статьей в социальных сетях, чтобы не потерять

4 комментария

  • Максим

    Вот тут или у меня руки кривые, или 48 из 7-ми. Пишу все, как в примере:

    @font-face {
    font-family: '';
    src: url();
    ....
    }
    

    просматриваю (использую OpenServer-платформу) — показывается в стандартных шрифтах

    Ответить
  • dimadv7

    Не понял в чем вопрос то?))) Главное пути правильно прописать, а в остальном ошибиться — сложно

    Ответить
  • Максим

    Да пути точно правильно прописаны! А вопрос в том, что шрифт отображается стандартный, а не тот, который я подключил через

    @font-face

    Да… и еще, сделайте, пожалуйста, уведомления на e-mail о Ваших ответах на комментарии к Вашим статьям. Это было бы удобно. Спасибо!

    Ответить
  • dimadv7

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

    Ответить

Добавить комментарий