Теперь и Google представил собственный сервис для шрифтов — Google Font API.
Как работает Google Font API
Этот сервис представляет ссылку на свойство CSS3 @font-face. При вставлении кода Google Font API на страницу, для выбранного шрифта он возвращает таблицу стилей с правилами @font-face.
Это выглядит так:
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: normal;
src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
}
Google выполняет всю тяжелую работу по формированию отображения шрифта в браузерах, которые не поддерживают CSS3, например — , Internet Explorer.
Преимущества
- Google Font API – простое решение использования произвольных шрифтов на веб ресурсах.
- Всего с помощью нескольких строк используется любой шрифт из директории Google Font.
- Google Font API не связан с Javascript. Так, даже если Javascript отключен, шрифты все равно выводятся.
- Поскольку шрифты выводятся с помощью CSS, то все новшества CSS3 добавляются к тексту.
Недостатки
Кириллица поддерживается в весьма скромном наборе. Однако при связывании Google Font API с Typekit с помощью Javascript и загрузчиком WebFont, Вам откроются дополнительные варианты.
Не поддерживается в мобильных браузерах: Webkit для iPhone, iPod, iPad, Android и дргугих.
Использование
Зайдите в директорию Google Font, просмотрите каталоги и выберите шрифт. Используем шрифты Neucha и Philosopher для демонстрации.
Перейдем на закладку Get the code и скопируем ссылку на стиль CSS.
В раздел head вставляем код и ссылки:
title>Используем вычурный шрифт с Google Font API _|_|_ Демонстрация для сайта RUSELLER.COM</title>
<link href='http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neucha&subset=cyrillic' rel='stylesheet' type='text/css'>
</head>
В таблице стилей нужно использовать имя шрифта, как оно определено в директории Google Font, для задания свойств нужным элементам:
blockquote {
font-family: "Philosopher", arial, serif;
font-size: 60px; line-height: 58px;
color: #3f3f3f; margin: 0 0 20px 0;
text-shadow: 0 3px 3px #999; -moz-text-shadow: 0 3px 3px #999; -webkit-text-shadow: 0 3px 3px #999;
}
cite {
font-family: "Neucha", arial, serif;
font-size: 60px;
color: #818181;
float: right; margin: -36px 70px 0 0;
}
Перегрузите страницю и смотрите результат.
