Одним из важных составляющих веб дизайна, безусловно, являются шрифты. За последние годы их количество и качество заметно подросли. На данный момент времени среди веб-дизайнеров наиболее популярные кириллические шрифты — 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. Для других шрифтов настройки настройки могут отличаться.
Возможные проблемы
Если у вас возникли какие-либо проблемы с подключением или использованием шрифта гугл, пожалуйста, пишите в комментариях внизу и мы обязательно вам ответим.