Подключение нестандартных шрифтов на лендинг пейдж

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

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

Использование нестандартных шрифтов

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

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

В начале своей работы в интернете для меня это было существенной проблемой, и я искал все форматы одного и того же шрифта вручную, но потом наткнулся на сервис fontsquirrel.com, который позволяет загрузить один формат шрифта и на его основе сгенерировать дополнительные. подключение нестандартных шрифтов Все, что нужно сделать - это нажать "Add Fonts", выбрать шрифт, поставить галочку, которая подтверждает, что вы имеете право пользоваться шрифтом, и скачать архив со всеми необходимыми форматами шрифта. Как видите - ничего сложно. на этом же сайте, кстати, вы можете подобрать и сам шрифт. На сервисе собрано огромное количество бесплатных шрифтов.

Подключение нестандартных шрифтов на сайт

Одной из причин, почему я выбрал сервис описанный выше,  - это то, что там в архиве есть и демо файл, в котором описан способ подключения этих самых шрифтов. В моем случае это файл 7fonts.ru_typoslabserif-light-demo. Я открыл его в браузере, и на вкладке "INSTALLING WEBFONTS" можно посмотреть, как установить шрифт.

нестандартные шрифты для сайта

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

  • Первое, что я сделал - это убрал в именах шрифтов префиксы сайта. Было так: 7fonts.ru_typoslabserif-light-webfont.eot , а стало так: typoslabserif-light-webfont.eot. А также изменил имя вызова шрифта. Было так: typoslabserif-lightregular, а стало так: typoslabserif
  • Второе - это то, что я создал в корне сайта папку "fonts" и перекинул в нее все 4 типа шрифтов.
  • И третье - я изменил путь к шрифтам с учетом папки "fonts"

Получилось так:


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

Теперь для придания стилей тексту, например заголовку h1, достаточно воспользоваться такой конструкцией:

h1{
   font-family: 'typoslabserif';
}

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

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