Начните работу с Google Fonts API

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

Обзор

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

  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 Fonts .

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

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

https://fonts.googleapis.com/css

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

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

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

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

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

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

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

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

Например:

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 Font Directory поддерживают несколько шрифтов (например, латинский, кириллический и греческий). Чтобы указать, какие подмножества должны быть загружены, параметр подмножества должен быть добавлен к URL-адресу.

Например, чтобы запросить кириллическое подмножество шрифта 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

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

Полный список доступных шрифтов и подмножеств шрифтов см. в 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= в запрос Google Fonts API и добавьте соответствующее имя класса к элементам HTML, на которые вы хотите повлиять. В нашем примере выше мы использовали эффект shadow-multiple шрифта, поэтому запрос будет выглядеть так:

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

Чтобы использовать эффект, добавьте соответствующее имя класса к элементу (элементам) HTML. Соответствующее имя класса всегда является именем эффекта с префиксом font-effect- , поэтому имя класса для 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 » и просмотрите множество идей, которые уже есть в Интернете!

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

  • Полный список семейств шрифтов, предоставляемых Google Fonts API, см. в Google Fonts .
  • Узнайте, как использовать загрузчик веб-шрифтов , чтобы лучше контролировать загрузку шрифтов.
  • Узнайте больше о том, как работает Google Fonts API, на странице « Технические вопросы».