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

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

Рассмотрим на примере. Вставляем в страницу такой код:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<style>
  h1 { font-family: 'Lobster', arial, serif; }
</style>
<h1>Hi World!</h1>

Получаем вот такую прелесть:

Hi World!

В приведенном коде family=Lobster задает название шрифта. Если название шрифта состоит из нескольких слов, то их надо разделять плюсом: family=Irish+Grover.

Если необходимо использовать кириллицу, то подключение шрифта становится таким:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin&v1">

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

Если надо подключить несколько шрифтов, то код становится такой:

<link href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans" rel="stylesheet" type="text/css">

Для подключения стиля или жирности шрифта используется такой код:

<link href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold" rel="stylesheet" type="text/css">