Грузим шрифт на сайт, используя Google

google-fonts-logo

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

В чем плюсы?

  1. Гибкая настройка параметров интегрируемого шрифта.
  2. Большая коллекция (на момент написания данной статьи — 707 шрифтов, 60 из них имеют кириллические символы).
  3. Шрифты грузятся не с вашего сервера, а с серверов гугл. Снижается объем трафика.

Последний «плюс» довольно призрачный и спорный. Особенно в свете безумия с разными санкциями и политиканством. Возьмут завтра и перестанут обслуживать Россию, отключат сервисы гугл для нашей территории. Или каналы связи будут с европой и америкой очень тонкими, так что шрифты будут грузиться с серверов гугл бесконечно долго. На практике вероятность реализации этих событий не велика, но помнить об этом стоит.

Чтобы избежать таких рисков можно разместить шрифты прямо у себя на сервере (читайте здесь — как).

Попав на сайт www.google.com/fonts, вы увидите коллекцию шрифтов. Используйте разные фильтры (слева) и виды представления шрифтов (word, sentence, paragraph, poster). Сформируйте свою коллекцию из этой базы.

Весь процесс от выбора шрифтов до получения кода вставки разбит на три этапа.

Шаг — выбор (choose)

Ищите нужные вам шрифты и жмите кнопку «add to collection».

add-to-collection-google-fonts

Когда вы отберете необходимые шрифты в вашу коллекцию, можно будет ими заняться более детально.

Шаг — обзор (review)

В этом режиме вы сможете рассмотреть каждый из шрифтов в деталях. Провести некоторые тесты, например, можно подставить собственный пример текста, посмотреть разные размеры и наборы шрифтов, выбрать что будет входить в экспорт шрифта. Есть даже такой уникальный режим — «Сравнение» (вкладка «Compare»), где можно наложить два шрифта друг на друга, по-символьно их сравнивая.

compare-mode

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

Шаг — использование (Use)

На последнем этапе вам предложат выбрать стили, наборы символов и получить код для вставки. Специальный индикатор будет показывать, на сколько массивной получилась собранная коллекция.

last-step-speed-o-load-meter

Написать комментарий

Мало букафф? Читайте есчо !

Чудесный шрифт (awesome font CDN)

Ноябрь 23, 2016 г.

Идея пиктографических шрифтов эксплуатируется уже давно. Взять хотя бы фреймворк css bootstrap. Соль в том, что мы работаем с векторными рисунками. Они ...

Читать

Грузим свой шрифт на сайт, используя CSS

Август 28, 2012 г.

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

Читать

 

Комментарии к «Грузим шрифт на сайт, используя Google»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: