Как использовать Google Font API

Вам понравилась эта статья?

Google Font APIУже очень давно выбор шрифтов для веб-страниц является строго ограниченным. Все браузеры поддерживают Arial, Georgia, Verdana и Times New Roman. Но в последнее время сообщество веб-дизайнеров всколыхнула новость о веб-шрифтах. «Веб-шрифты» — это общее название нового метода доступа к шрифтам в интернете. Благодаря этой технологии, даже если у пользователя на компьютере нет определенного файла со шрифтом, он все равно сможет увидеть его на веб-странице.

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

Основы Google Font API

Google Font API простой в использовании и не требует особенных знаний в программировании или чего-нибудь подобного. Если вы уже создавали сайты, то наверняка справитесь. А если нет, то попросите одного из своих технически продвинутых  друзей помочь вам.

Google Font API

Как это работает: @font-face

Google Font API использует свойство CSS @font-face. Не переживайте, если раньше о нем не слышали, вам не обязательно знать все его тонкости. @font-face позволяет вам использовать файлы шрифтов (они имеют расширения .otf и .ttf) точно так же, как в настольных программах, например, в Microsoft Word или Adobe Photoshop.

Сложность с этим свойством состоит в том, что разные браузеры используют разные типы шрифтов. Например, Internet Explorer понимает только .eot-файлы, в то время как браузерам, наподобии Firefox, нужны файлы в формате .otf. Таким образом, разработчики должны как-то выкручиваться, чтобы обеспечить поддержку @font-face во всех браузерах. Можно, например, задавать условия в CSS, в зависимости от которых браузер будет подгружать файл определенного типа.

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

Google Font API решает все эти проблемы.

Выгоды от использования Google Font API

Google Font API — отличное решение, избавляющее от множества проблем, связанных с @font-face. Прежде всего, этот сервис упрощает использование веб-шрифтов. Вы можете добавить их на свою страницу с помощью всего одной строчки в HTML и нескольких строчек в CSS. Не нужно беспокоится об особенностях разных браузеров, о разных форматах шрифтов или о том, как это все работает — Google Font API избавляет вас от всех этих забот.

Шрифты официально поддерживаются во всех популярных браузерах: в  Internet Explorer, Firefox, Chrome и Safari. Шрифты от Google открытые и предоставляются безвозмездно. Это значит, что вы можете спать спокойно и не тревожиться о проблемах с лицензиями.

Есть и технические выгоды от использования Google Font API, по сравнению с хранением шрифтов у себя на сервере. Инфраструктура Google известна в мире высоких технологий прежде всего своей чрезвычайной стабильностью и устойчивостью к большим нагрузкам. Эта компания является первопроходцем и лидером  в оптимизации сайтов. Google разрабатывает инструменты для улучшения времени отклика страниц, создает новые протоколы и стандарты, чтобы улучшить общую скорость в интернете. Более того, если пользователь уже посетил сайт, который использует Google Font API, он уже будет иметь в своем кеше нужный шрифт, что повысит скорость загрузки вашей страницы.

И, главное, все эти преимущества абсолютно бесплатны. Не существует никаких преград на пути использования Google Font API.

Как пользоваться Google Font API

Google Font API хорошо документирован, но давайте пройдемся по наиболее важным моментам.

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

Чтобы работать с Google Font API, нужно сделать две вещи.

Первая — указать внутри вашей страницы путь к файлу с CSS-стилем. Если быть более точным, то это нужно сделать внутри тега <head>, который находится в начале страницы. Это делается на всех страницах, использующих Google Font API. Если вы пользуетесь системой управления контентом (CMS), например, WordPress, то вам нужно вносить изменения в шаблон. Если же у вас статический сайт, то вам нужно вносить изменения во все страницы, или же, если у вас есть глобальный файл CSS, можно использовать директиву @import прямо в нем.

В примере тег <link> указывает браузеру, что нужно импортировать шрифт. Свойство href наиболее важное. FontName — это имя шрифта, который вы хотите использовать на своей странице. Нужно заменить FontName на имя одного из шрифтов, список которых можно посмотреть на Google Font Directory.

<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName">
</head>

Вторая вещь, которую нужно сделать, это указать в CSS, как и где мы хотим использовать шрифт. Скажем, мы захотели применить FontName ко всем тегам абзацев на странице. Код CSS будет выглядеть примерно так:

p {
font-family: «FontName»;
font-size: 12px;
}

Для всех, кто плохо разбирается в CSS, этот код означает дословно следующее: «Все абзацы (p) должны использовать шрифт 'FontName' размера 12 пикселей.»

Разные стили для шрифта

Теперь, когда вы уже познакомились с основами использования Google Font API, давайте попробуем сделать что-то более сложное. По умолчанию, вы получаете шрифт с обычным стилем. Но что если вы хотите использовать полужирное или наклонное начертание? Элементарно. Нужно просто добавить двоеточие (:) в конце имени шрифта и указать стиль начертания, который вам нужен. Можно также указывать несколько стилей сразу. Вот пример того, как получить шрифт с наклонным и полужирным начертанием:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=FontName:italic,bold">

Вы можете использовать такие значения: italic (или i), bold (или b) и bold italic (или bi).

Использование нескольких шрифтов

Часто, вам нужно больше чем один шрифт. Не обязательно делать несколько ссылок на каждый из них. Достаточно добавить в код запроса шрифта символ «|» и указать после него еще одно название.

Например, нам нужна версия шрифта FontName в начертании bold italic и наклонное начертание шрифта AnotherFontName. Наш код будет выглядеть так:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName:bolditalic|AnotherFontName:italic">

Вот и все, что нужно сделать!

Инструменты для работы с Google Font API

Google создал некоторые инструменты, чтобы упростить работу с Font API. Это Font Directory, Предпросмотр и Web Font Loader. Давайте рассмотрим каждый из них отдельно.

1. Google Font Directory

Google Font Directory

Google Font Directory содержит в себе все доступные шрифты из Google Font API. На сегодняшний день, можно использовать 18 шрифтов, такие как Droid Sans, Molengo, Nobile и т.д. По клику на шрифт можно узнать о нем более детальную информацию, включая автора, лицензию, описание, полный набор символов и другое. Кроме того, по клику на вкладке «Get the code», появляется код, который можно вставить в свою страницу.

2. Предпросмотр или Google Font Previewer

Google Font Directory

Этот инструмент позволяет экспериментировать со шрифтами. Вы можете изменять размер, стиль и расстояние между символами. Когда вы подберете подходящий стиль, вы сможете использовать автоматически сгенерированный CSS-код. Шрифт на вашей странице будет отображаться так, как это видно на предпросмотре.

3. Загрузчик шрифтов или Web Font Loader

Для тех разработчиков, которым нужен еще больший контроль над шрифтами из Google Font API, была создана специальная JavaScript-библиотека. Она предоставляет вам возможность управлять всеми стадиями загрузки шрифта.

Вам понравилась эта статья?