Простая вычурная веб типографика с помощью Google Font API

В мире веб типографики в изобилии присутствуют ограничения и способы их преодоления. В наличии уже имеются такие инструменты как SiFR, Cufon, Typekit, @font-face. Теперь и Google представляет свой собственный сервис для шрифтов, известный как Google Font API. В данном уроке мы посмотрим, что из себя представляет 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 замечательно работает в большинстве используемых сегодня браузеров.

Директория Google Font содержит прекрасные и стильные шрифты, которые можно использовать для декорирования сайта (к сожалению, кириллица поддерживается в весьма скромном наборе).

Все шрифты Google Font API можно использовать и в коммерческих и персональных приложениях.

Google Font API не связан с Javascript, таким образом шрифты выводятся даже если пользователь отключил Javascript.

Так как шрифты выводятся с помощью старого доброго CSS, то любые новшества CSS3, например, свойство text-shadow, можно добавить к тексту.

Недостатки

Не смотря на отличный набор опций в директории Google Font , выбор весьма ограничен (особенно в области кириллических шрифтов). Однако, вы можете связать 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;
	}

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

Готово!