Как подключить шрифт от Google Fonts?

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

Поиск подходящего шрифта от Google Fonts

Давайте зайдем на сам сервис шрифтов от гугл и разберем его возможности.
 

 

 
В левой (боковой) панели, вы можете настроить параметры фильтрации шрифта и самое главное выбрать его принадлежность к кириллице или латинице.
В верхней части можно сменить отображение демо-текста, в виде: слова, предложения, параграфа, постера. Изменить размер шрифта и ввести свой текст вместо демо варианта.

Подключение шрифта от Google Fonts

После того, как вы выбрали нужный шрифт, жмем по кнопочке "quick-use" (см. картинку, ниже)

 

 
На странице подключения шрифта, нужно выбрать:
 

 
1. Стили шрифта, жирность, курсив и т.д. Сильно не разгоняйтесь, выбирайте только самое необходимое, т.к. все это влияет на скорость загрузки шрифта и соответственно скорость загрузки текста у вас на сайте. Следите за показателями датчика справа (пункт 5 на картинке)
2. Выбираем какие символы вам необходимы в этом шрифте (в основном латиница и кириллица).
3. Копируем код тега link в блок HEAD
4. Используем объявление шрифта в стилях как показано в пункте 4 (см.картинку)

Свои вопросы и отзывы оставляйте, пожалуйста, в комментариях 🙂

Рубрика: Как сделать?