Начало работы с API Google Fonts

В этом руководстве объясняется, как использовать API Google Fonts для добавления шрифтов на ваши веб-страницы. Вам не нужно заниматься программированием; все, что вам нужно сделать, это добавить специальную ссылку на таблицу стилей в ваш HTML-документ, а затем обратиться к шрифту в стиле CSS.

Быстрый пример

Вот пример. Скопируйте и вставьте следующий HTML-код в файл:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Затем откройте файл в современном веб-браузере. Вы должны увидеть страницу, на которой шрифтом Tangerine отображается следующее:

Делаем Интернет красивым!

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

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Теперь вы должны увидеть тень под текстом:

Делаем Интернет красивым!

И это только начало того, что вы можете сделать с помощью Fonts API и CSS.

Обзор

Вы можете начать использовать API Google Fonts всего за два шага:

  1. Добавьте ссылку на таблицу стилей, чтобы запросить нужные веб-шрифты:

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. Оформите элемент с помощью запрошенного веб-шрифта либо в таблице стилей:

    .css-selector {
font-family: 'Font Name', serif;
}

    или с помощью встроенного стиля самого элемента:

    <div style="font-family: 'Font Name', serif;">Your text</div>

Список шрифтов, которые вы можете использовать, см. в разделе «Шрифты Google» .

Указание семейств и стилей шрифтов в URL-адресе таблицы стилей

Чтобы определить, какой URL-адрес использовать в ссылке на таблицу стилей, начните с базового URL-адреса API Google Fonts:

https://fonts.googleapis.com/css

Затем добавьте параметр URL-адреса family= с одним или несколькими названиями и стилями семейств шрифтов.

Например, чтобы запросить шрифт Inconsolata :

https://fonts.googleapis.com/css?family=Inconsolata

Чтобы запросить несколько семейств шрифтов, разделите имена вертикальной чертой ( | ).

Например, чтобы запросить шрифты Tangerine , Inconsolata и Droid Sans :

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

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

API Google Fonts по умолчанию предоставляет обычную версию запрошенных шрифтов. Чтобы запросить другие стили или насыщенность, добавьте двоеточие ( : ) к имени шрифта, а затем список стилей или насыщенности, разделенный запятыми ( , ).

Например:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Чтобы узнать, какие стили и насыщенность доступны для данного шрифта, просмотрите список шрифтов в Google Fonts .

Для каждого стиля, который вы запрашиваете, вы можете указать полное имя или сокращение; для весов вы также можете указать числовой вес:

Стиль Спецификаторы
курсив italic или i
смелый bold или b или числовой вес, например 700
жирный курсив bolditalic или bi

Например, чтобы запросить курсив Cantarell и жирный шрифт Droid Serif, вы можете использовать любой из следующих URL-адресов:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Использовать шрифт-дисплей

font-display позволяет вам контролировать, что происходит, пока шрифт недоступен. Обычно уместно указать значение, отличное от значения по умолчанию auto .

Передайте желаемое значение в параметре display строки запроса:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Указание подмножеств скриптов

Некоторые шрифты в каталоге шрифтов Google поддерживают несколько шрифтов (например, латиницу, кириллицу и греческий). Чтобы указать, какие подмножества следует загрузить, к URL-адресу следует добавить параметр subset.

Например, чтобы запросить кириллицу шрифта Roboto Mono , URL-адрес будет таким:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Чтобы запросить греческое подмножество шрифта Roboto Mono , URL-адрес будет следующим:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Чтобы запросить как греческую, так и кириллическую подгруппу шрифта Roboto Mono , URL-адрес будет следующим:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Латинское подмножество всегда включается, если оно доступно, и его не нужно указывать. Обратите внимание: если клиентский браузер поддерживает диапазон юникода ( http://caniuse.com/#feat=font-unicode-range ), параметр subset игнорируется; браузер выберет из подмножеств, поддерживаемых шрифтом, чтобы получить то, что ему нужно для отображения текста.

Полный список доступных шрифтов и подмножеств шрифтов см. в Google Fonts .

Оптимизация запросов на шрифты

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

В этих случаях вам следует рассмотреть возможность указания значения text= в URL-адресе запроса шрифта. Это позволит Google вернуть файл шрифта, оптимизированный для вашего запроса. В некоторых случаях это позволяет уменьшить размер файла шрифта до 90%.

Чтобы использовать эту функцию, просто добавьте text= к запросам API Google Fonts. Например, если вы используете Inconsolata только для заголовка своего блога, вы можете указать сам заголовок в качестве значения text= . Вот как будет выглядеть запрос:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Как и в случае со всеми строками запроса, значение следует закодировать в URL-адресе:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Эта функция также работает для международных шрифтов, позволяя указывать символы UTF-8. Например, ¡Привет! представлен как:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Включение эффектов шрифта (бета-версия)

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

Это эффект шрифта!

Чтобы использовать эту бета-функцию, просто добавьте effect= в запрос API Google Fonts и добавьте соответствующее имя класса к элементам HTML, на которые вы хотите повлиять. В нашем примере выше мы использовали эффект shadow-multiple шрифта, поэтому запрос будет выглядеть так:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Чтобы использовать эффект, добавьте соответствующее имя класса к элементам HTML. Соответствующее имя класса всегда является именем эффекта с префиксом font-effect- , поэтому имя класса дляshadow shadow-multiple будет иметь font-effect-shadow-multiple :

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Вы можете запросить несколько эффектов, разделив имена эффектов символом вертикальной черты ( | ).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Вот полный список всех эффектов шрифтов, которые мы предлагаем:

Эффект Имя API Имя класса Поддерживать
Анаглиф anaglyph font-effect-anaglyph Хром, Фаерфокс, Опера, Сафари
Кирпичный знак brick-sign font-effect-brick-sign Хром, Сафари
Печать на Холсте canvas-print font-effect-canvas-print Хром, Сафари
Треск crackle font-effect-crackle Хром, Сафари
Разлагающийся decaying font-effect-decaying Хром, Сафари
Разрушение destruction font-effect-destruction Хром, Сафари
Проблемный distressed font-effect-distressed Хром, Сафари
Проблемное дерево distressed-wood font-effect-distressed-wood Хром, Сафари
Тиснение emboss font-effect-emboss Хром, Фаерфокс, Опера, Сафари
Огонь fire font-effect-fire Хром, Фаерфокс, Опера, Сафари
Огонь Анимация fire-animation font-effect-fire-animation Хром, Фаерфокс, Опера, Сафари
Хрупкий fragile font-effect-fragile Хром, Сафари
Трава grass font-effect-grass Хром, Сафари
Лед ice font-effect-ice Хром, Сафари
Митоз mitosis font-effect-mitosis Хром, Сафари
Неон neon font-effect-neon Хром, Фаерфокс, Опера, Сафари
Контур outline font-effect-outline Хром, Фаерфокс, Опера, Сафари
Паттинг Грин putting-green font-effect-putting-green Хром, Сафари
Потертая сталь scuffed-steel font-effect-scuffed-steel Хром, Сафари
Теневой множественный shadow-multiple font-effect-shadow-multiple Хром, Фаерфокс, Опера, Сафари
Расколотый splintered font-effect-splintered Хром, Сафари
Статический static font-effect-static Хром, Сафари
Стоунвош stonewash font-effect-stonewash Хром, Сафари
Трехмерный 3d font-effect-3d Хром, Фаерфокс, Опера, Сафари
Трехмерный поплавок 3d-float font-effect-3d-float Хром, Фаерфокс, Опера, Сафари
Винтаж vintage font-effect-vintage Хром, Сафари
Обои wallpaper font-effect-wallpaper Хром, Сафари

Существует еще много способов стилизации шрифтов, и многое можно сделать с помощью CSS. Мы просто предлагаем несколько идей, с которых можно начать. Чтобы найти больше идей, попробуйте выполнить поиск в Google « текстовые эффекты CSS » и просмотрите множество идей, которые уже есть в Интернете!

Дальнейшее чтение