04.05.2011 3 769 Полезно

Шрифты Google API

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

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

Шаг 1. Добавить ссылку таблицы стилей выбранного шрифта
Выберите понравившийся из каталога шрифт и вставьте его название в Font+Name.

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

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

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

То есть вместо CSS selector вставляете: h1, li, a и т.д.
Если Вы собираетесь использовать данный шрифт только один раз, можете декларировать стиль в HTML:

<div style="font-family: 'Font Name', serif;">Ваш текст</div>

И, как вы наверно заметили, в примерах используется также "откатной" шрифт serif - на случай не работоспособности сервиса Google. Можно использовать и другой безопасный шрифт.

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

Выбран шрифт Tangerine, в качестве "отката" - шрифт serif.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
        <style>
            body {
                font-family: 'Tangerine', serif;
                font-size: 48px;
            }
        </style>
    </head>
    <body>
        <h1>Пример текста заголовка</h1>
    </body>
</html>

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

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

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

Разделяйте названия шрифтов | без пробелов между ними. Обратите внимание на + в шрифте Droid Sans. Используйте + в названиях шрифтов, где есть пробелы. В нашем случае название шрифта Droid Sans, поэтому будем в запросе записывать Droid+Sans.
Используйте двоеточие ":" после названия шрифта (без пробелов), чтобы загрузить другие вариации шрифта (например, italic, bold, bolditalic) или короткий код вариации (например, i, b, bi). Если предполагается использовать различные вариации для одного шрифта, указывайте их без пробелов, разделяя запятыми.

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

Для кирилических (Cyrillic) шрифтов (или других: latin, Greek, Khmer) нужно будет указать в запросе, какой именно тип подгружать у шрифта.
Например для шрифта Philosopher подгрузим только кириллицу:

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

или же погрузим сразу и кириллицу и латиницу:

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Вот такую полезную штуку придумали ребята из Гугл.

Ссылки

Шрифты Google API

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

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

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

Комментарии

Похожие статьи