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

Сервис Google Web Fonts содержит шрифты, как поддерживающие кириллицу, так и не поддерживающие. На момент написания статьи с обычной кириллицей было 55 шрифтов, без кириллицы, только с латиницей 650 шрифтов, выбор может быть и не велик, но может быть и достаточен. Если нет, то Вам определённо подойдёт другой способ интеграции: Интеграция шрифтов с помощью правила CSS.

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

Итак, давайте по шагам рассмотрим, как интегрировать шрифты с помощью сервиса Google Web Fonts. Рассмотрим весь процесс на примере шрифта Open Sans имеющего 10 стилей и созданного Steve Matteson.

Интеграция шрифтов с помощью Google Web Fonts

Сначала нам надо выбрать шрифт, который нам необходим. Можно просто листать шрифты, пока не найдём, шрифт нужный нам, а можно воспользоваться фильтром с множеством опций. Как выше написано выбрал я шрифт Open Sans, я подчеркнул его красным.

Далее жмём на кнопку Quick-use (на неё указывает красная стрелка), быстрое использование, можно конечно сначала с помощью кнопки Add to Collection, добавить шрифт в коллекцию и потом нажать кнопку Use, но мы используем шрифт быстро.

После этого мы попадаем на страницу с 4 пунктами. Здесь можно поставить галочки на дополнительных опциях и посмотреть предполагаемую скорость загрузки. Или же сразу перейти к пунктам 3 и 4. В пункте 3 на вкладках показан код различных способов интеграции.

Интеграция шрифтов с помощью Google Web Fonts

Вкладка Standard: Интеграция происходит непосредственно внутрь тега <head>.

Вкладка @import: Интеграция происходит непосредственно в ваш файл стилей, имеющий расширение CSS.

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

В 4 пункте мы видим, как можно использовать подключенный шрифт в стилях нашего сайта, то есть в файлах с расширением CSS, а именно:

font-family:'Open Sans', sans-serif;

обратите внимание, что если вдруг что-то пойдёт ни так и загрузка шрифта не будет произведена, то sans-serif обеспечит использование любого шрифта из этого семейства.