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

Напомню, что нам нужны следующие семейства и начертания:

  • Source Sans Pro – обычный, светлый, полужирный, жирный;
  • Gotham – светлый, жирный, тёмный;
  • Gotham Light – обычный;
  • Open Sans – обычный.

Рассмотри порядок работы на примере первого из них.

Порядок работы с сервисом Google Fonts +

Шаг 1. Заходим на сервис и в форме поиска вверху справа вводим нужный шрифт.

фото 1

Сразу же нашлось то, что нужно

фото 2

Жмём красный крестик, чтобы добавить шрифт в выбранные.

Шаг 2. Выбираем нужные начертания.

Внизу появляется выпадающая панель с заголовком «Family Selected».

фото 3

Нажимаем на неё и выбираем вкладку «Customize». Здесь можно выбрать необходимые начертания и языки. Нам нужны обычный, светлый, полужирный, жирный варианты. Поэтому выбираем light, regular, semi-bold и bold. В языковых пакетах отмечаем Cyrillic и Cyrillic Extended.

фото 4

Шаг 3. Копирование и использование ссылок.

После этого возвращаемся на вкладку «Embed». Система сформировала для нас две ссылки. Первую нужно вставить в шапку сайта между тегам <head> и </head>, вторую применяем для прописывания шрифта в стилях css, когда он нам понадобится.

фото 5

Как видите, проще не бывает. Можно подключить шрифты по одному, можно сразу выбрать все нужные семейства и сформировать одну ссылку.

Достоинства и недостатки

Плюсы метода очевидны:

  • простота работы;
  • отсутствие проблем с правообладателями;
  • наличие большинства популярных шрифтов в коллекции.

Но есть и минусы:

  • не всегда можно найти кириллические версии;
  • зависимость сайта от внешних ресурсов;
  • уменьшение скорости работы;
  • риск блокировок (санкции, роскомнадзор и прочие стихийные бедствия).

Поэтому в следующей статье мы рассмотрим классический способ подключения шрифтов с помощью сервиса Font Squirrel. Использование его немного сложнее, однако, в итоге сайт будет иметь всё необходимое для работы под рукой, на сервере.