Google Fonts. Документация и примеры использования

21.12.2018

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

Простой пример подключения Google Fonts:

<html>
  <head>
    <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>

Подключить шрифты к своему сайту можно двумя способами:

1. Подключаем шрифт как внешний файл в HTML через тег link:

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

2. Импортируем шрифт в свой CSS-файл или как инлайн-стили:

<style>
  @import url('https://fonts.googleapis.com/css?family=Tangerine');
</style> 

Используем шрифт просто в своих CSS правилах:

  font-family: 'Tangerine', cursive;

Для Гугловских шрифтов доступны все те же правила и свойства, что и для обычных шрифтов (вдруг, кто не знал)

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

А теперь интересное.

1. Несколько шрифтов в одном запросе

Не нужно подключать каждый шрифт отдельным запросом, в одном запросе можно подключить сразу несколько шрифтов разделяя их вертикальной чертой |

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

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

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

Можно использовать сокращения:
italicitalic или i
boldbold или b, или числовое значение 700
bold italicbolditalic или bi

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

2. Поддержка кириллицы

Не все шрифты поддерживают кириллицу, проверить это можно только на сайте при выборе шрифтов. Если не поддерживается кириллица, то вы не увидите гугловский шрифт на своем сайте, если же шрифт поддерживает кириллицу, то нужно подключать его с поддержкой subset=cyrillic

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

При этом латиницу не нужно подключать, она поддерживается по умолчанию.

3. Оптимизация запроса шрифта

Если вы хотите использовать какой-то диковинный заморский шрифт всего лишь для логотипа или какой-то короткой фразы, то вовсе не обязательно подключать весь шрифт со всем алфавитом. Можно подключить только нужные буквы с помощью параметра text= при подключении шрифта. И это очень круто.

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

так же поддерживаются пробелы и прочие символы в формате URL-encode

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

а еще поддерживаются UTF-8 символы, например, текст ¡Hola! можно вывести таким образом:

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

При подключении отдельных букв не нужно указывать язык с помощью параметра subset=, подключатся только те буквы, что будут указаны при подключении шрифта в параметре text=

4. CSS Эффекты для шрифтов

В Google Fonts есть встроенная поддержка CSS Эффектов для шрифтов, что может пригодиться для красивого выделения заголовков или других семантических частей текста. Для этого используется параметр effect=

Подключаем шрифт с эффектом 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

Список всех эффектов для нескольких шрифтов:

//fonts.googleapis.com/css?family=Tangerine|Rancho|Source+Sans+Pro:900&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper

Список всех эффектов на живом примере (некоторые примеры могут не работать в Mozilla Firefox):

See the Pen Enabling font effects for google fonts by Denis (@deniscreative) on CodePen.0

Полезная инфа:

Оставить комментарий