Руководство по Google Font API

Несмотря на новые веб-технологии и стартапы, ещё до недавнего времени мы испытывали недостаток в богатой и красивой веб-типографии.

Хотя у нас достаточно широкий выбор гарнитур, мы могли использовать только определённый набор правильных шрифтов, установленных и поддерживаемых большинством компьютеров — эти шрифты были известны как — Безопасные веб-шрифты (Web-safe fonts).

Веб-типография против печатной типографии

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

Но сейчас, разделение между печатными и виртуальными носителями сокращается. Сейчас @font-face поддерживают многие современными браузеры (включая Internet Explorer с версии IE4.0).

Введение в Google Font API

Google Font Directory и Google Font API — это бесплатные веб-сервисы от Google, которые предоставляют владельцам сайтов возможность использовать различные шрифты простым, удобным и эффективным способом.

Google Font API — новый представитель ниши Font-as-Service, который включает TypeKit, Typotheque и др.

Итак, давайте окунёмся в неисследованный потенциал Google Font API.

Что такое Google Font API?

Вы много путешествовали по интернету, но на многих ли сайтах или блогах вы видели нестандартные шрифты?

Давайте определим нестандартные шрифты, которые не входят в число безопасных (Arial, Helvetica, Verdana, Georgia и Times New Roman).

Google Font API — это веб-сервис, предоставляющий высококачественные открытые (open source) шрифты, которые легко могут быть использованы в вашем дизайне.

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

Преимущества использования Google Font API

Если вы ещё решаете, использовать ли Google Font API, то вот некоторые из его преимуществ.

Использование HTML текста

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

Кроме того, вам не нужно будет изменять существующий контент — вы только обновите свои CSS таблицы.

Доступность

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

Надёжная инфраструктура и снижение нагрузки на ваш сервер

Так как загрузка вашего @font-face использует надёжную инфраструктуру Google, вы можете быть уверены в том, что обслуживание файлов шрифтов будет быстрым, а вы сможете снизить нагрузку на собственный сервер.

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

Вам не нужно быть профессиональным веб-разработчиком, чтобы использовать Google Font API. Всё, что нужно для этого сделать — это добавить один элемент stylesheet link на свою страницу, после чего, вы можете начинать использовать этот шрифт в CSS.

Вот обобщённый процесс использования Google Font API:

Шаг 1: Добавление ссылки в таблицу стилей с выбранным шрифтом

Для начала зайдите в коллекцию шрифтов Google, чтобы посмотреть, какие шрифты доступны для использования. Вот основной формат для включения определённого шрифта:

Шаг 2: Использование шрифта для назначения стиля HTML элементам

В примере ниже вы назначаете своим элементам <h1> шрифт под названием Font Name, используя CSS атрибут font-family.

Если вам нужен шрифт для одноразового использования, вы можете объявить стиль одной строкой.

Шаг 3: Всегда имейте запасной вариант

Вы, возможно, обратили внимание на то, что в предыдущих фрагментах кода мы использовали serif, как запасной шрифт. Это сделано для того, чтобы избежать любых неожиданных результатов. Это означает, что если с серверами Google что-то не так, браузер может использовать свой стандартный шрифт Serif. Сделайте это привычкой, когда используете атрибут font-family, не важно используете ли вы @font-face или нет, всегда указывайте дополнительные шрифты — эта технология называется наборами шрифтов.

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

Скопируйте и вставьте следующий блок кода в свой HTML документ, сохраните его, а затем откройте в своём браузере.

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

Вы можете поэкспериментировать с разными шрифтами, но для примера мы использовали гарнитуру Lobster.

Результат:

Запрос на использование нескольких шрифтов с Google Font API

Скажем, вам нужно три шрифта из Google Font Directory. Не делайте множество запросов. Множественные запросы увеличивают число HTTP запросов. Меньшее количество HTTP запросов уменьшает время отклика веб-страницы.

Вместо множества тегов stylesheet link, используйте следующий формат для свойства href одного тега stylesheet link.

Пример ниже загрузит все три шрифта (Vollkorn, Yanone и Droid Sans) с помощью одного запроса.

Теперь вы можете использовать любой из этих трёх шрифтов в своих стилях.

На что следует обратить внимание

Отделяйте названия шрифтов с помощью | без пробелов. Обратите внимание на использование + в шрифте Droid Sans. Используйте символ + в названиях шрифтов вместо пробела.

Совет: Использование слишком большого количества шрифтов в одном запросе может увеличить время отклика страницы. Загружайте только те шрифты, которые вам действительно нужны. Будьте консервативны.

Параметры Weight и Style шрифтов Google Font API

У веб-шрифтов также имеются различные параметры weight/style. Чтобы их использовать, добавьте к названию шрифта двоеточие (:), а после него укажите style и weight.

В примере ниже мы указываем bold и bold-italic для Vollkorn, и italic для Inconsolata.

Также есть сокращения для разновидностей каждого шрифта:

• Bold: — b
• Italic: — i
• Bold-Italic: — bi

Вот пример использования сокращений:

На что нужно обратить внимание

Используйте двоеточие (:) без пробела после названия шрифта, а затем указывайте название стиля (т.е. bolditalic) или соответствующее сокращение (т.е. bi). Если вам нужно много разновидностей одного шрифта, разделите их запятой (,) без пробелов.

Google Font API делает веб-типографию привлекательнее

Индустрия веб-дизайна активно ищет решение старой проблемы выбора и использования веб-шрифтов, и, вроде бы, @font-face является ответом.

А вы что думаете по этому поводу? Поделитесь, пожалуйста, своими мыслями и мнениями в комментариях.