Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Сервис Google Fonts

Дата:9.01.16 в 11:56
Раздел: 

В статье рассказывается о работе Google Fonts, с помощью которого можно подключать шрифты на сайт. Также приведены пояснения, как это делается.

Google Web Fonts

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

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

Сервис предлагает три возможных варианта подключения своей продукции:

  • через HTML посредством тега link;
  • через CSS посредством свойства @import;
  • через javascript.

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

Пример использования

Для примера я выбрал шрифт Marck Script. Генерируем код для подключение шрифта через файл CSS

CSS

@import url(https://fonts.googleapis.com/css?family=Marck+
Script&subset=latin,cyrillic);

А для нужного участка текста подключаем такой код

CSS

font-family: 'Marck Script', cursive;

Смотрим, как получилось в браузере:

Сервис гугл

При использовании стандартного приема с помощью свойства @font-face для каждого отдельного стиля начертания было свое название шрифта. В этом же случае этот момент учитывается сразу.

Стоит также отметить тот положительный факт, что шрифты из коллекции Google Web Fonts настраиваются точно таким же способом, как и обычные – через свойство font-style.

В тоже время на страничке сервиса есть специальный инструмент, который позволяет опробовать выбранный шрифт и настроить его в онлайн режиме сразу, без участия CSS-свойств. Особенности внешнего вида будут заложены в код сразу. Этот инструмент можно найти на сайте по названию Test Drive.

На заметку

Единственный отрицательный эффект использования такого способа оформления текста – дополнительная нагрузка на сервер из-за кода, который будет обращаться к Google Web Fonts. Это может сказаться на скорости загрузки странички.

В завершении стоит отметить, что юзабилити сервиса очень простое, отрицательных эффектов практически нет. Единственное, что может ограничивать Вашу работу – наличие необходимого шрифта в коллекции Google Fonts.

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)