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

    Одним из важных составляющих веб дизайна, безусловно, являются шрифты. За последние годы их количество и качество заметно подросли. На данный момент времени среди веб-дизайнеров наиболее популярные кириллические шрифты — Roboto, OpenSans, Ubuntu, Lato и т.д.

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

    Мы также рекомендуем подключать через Google Fonts. Потому что компания Гугл сумела создать действительно кталог из красивых, быстро загружающихся, и корректно работающих шрифтов.

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

    Шаг 1: Выбор шрифта для сайта

    В первую очередь определиться со шрифтом. Обширный каталог доступен по ссылке — Google Fonts.

    Шаг 2: Выбор на сервисе Google понравившегося шрифта и его настройка.

    Кнопка Select this  font позволяет выбрать конкретный шрифт.

    После этого, в правом нижнем углу появится прямоугольная кнопка для редактирования параметров шрифта.

    Кнопка Family Selected открывает окошко с двумя вкладками. Начнем с второй вкладки Customize, в которой можно выбрать стили данного шрифта.

    Также в этой вкладке нужно выбрать поддержку кириллицы. А если кириллица не поддерживается, т.е. отсутствует выбор галочки Cyrillic, то, к сожалению этот шрифт вам не подойдет и нужно искать другой.

    Шаг 3: Внедрение на свой сайт.

    Первая вкладка окошка отвечает за способ внедрения шрифта.

    Мы рекомендуем загружать шрифт стандартным способом, поскольку метод @IMPORT имеет один существенный недостаток. А именно, — не поддерживает параллельную загрузку страницы. Это означает, что пока шрифт не будет загружен, остальные элементы сайта не будет доступны, что делает сайт менее конкурентоспособным.

    Шаг 4: Использование шрифта в CSS

    После того, как подключили шрифт, можно его использовать так:

    font-family: ‘Roboto’, sans-serif;

    Если шрифт основной на вашем сайте, то достаточно один раз указать свойство font-family в теге <body>.

    Стиль шрифта регулируется свойством font-weight. К примеру, если вы хотите выделить текст жирным, то можно написать так: font-weight: 700. Если хотите совсем тонкий шрифт, то: font-weight: 100.

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

    Возможные проблемы

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