Работаем с Font API от Google

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

Введение.

В течение последних нескольких лет постоянно появлялись новые методы использования альтернативных шрифтов. Все чувствуют подъем дизайна и юзабилити в веб, развитие сервисов и облачных приложений, все это ведет за собой и увеличение требований к типографике. Ограничение стандартным набором шрифтов, мешает развитию веб-дизайна в расширяющемся в геометрической прогрессии вебе. Поэтому стали появляться такие платные сервисы как TypeKit и FontDeck. В будущем, наверное, будут пояляется и другие.

Однако если вы посмотрите на основные технологии веб HTML, CSS, Javascript, PHP, все они являются бесплатными. Исходя из этого можно предположить, что вебу нужен эффективный, а главное бесплатный инструмент. Поэтому, то что предлагает нам Google наиболее подходящее в настоящее время решение для развития типографики в веб.

Меняет правило игры ?

Очевидно, что когда Google берется за что-нибудь, он делает это хорошо и меняет представление об этой отрасли. Так и со шрифтам, компания незаметно для всех выпустила (совместно с Typekit) Font API, который в долгосрочной перспективе изменит веб. Пока другие компании придумывают бизнес модели для подобных  сервисов, Google просто выпустили качественный бесплатный продукт.

Давайте посмотрим как это все работает на небольшом примере live demo:

HTML

Добавляем шрифты в Google Fonts API.

Теперь когда мы поняли, как же все это работает, давайте добавим своих шрифтов, для этого перейдем к Font Api и посмотрим на Каталог Шрифтов. Здесь вы увидите различных 18 шрифтов. Каждый шрифт имеет несколько вариантов. Когда вы выберите тот, который вам нравится, просто нажмите на него, чтобы увидеть дополнительные параметры. Допустим выберем IM Fell.

Когда вы увидите картинку с описание шрифта, просто нажмите на кнопку Get Code и вы увидите html код который нужно вставить в head страницы, а также пример css, как использовать новый шрифт.

Есть два способа вставки шрифта на сайт. Через html и через css @import.

Через HTML

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>

Через @import.

@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica);

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

<div>
<div>
<pre>#headline h1 {
	text-align: center;
	font-size: 8em;
	color: #111;
	text-shadow: 0px 2px 3px #555;
	font-family: 'IM Fell DW Pica', arial, serif;
}</pre>
</div>
</div>

Помимо этого, есть WebFont Loader инструмент, который представляет собой библиотеку Javascript, которая «дает вам больший контрль над шрифтом и позволяет использовать нескольких провайдеров для шрифтов» (в данном случае Font API — это провайдер шрифта, как и TypeKit) , это кстати их совместная разработка.

Выводы.

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

Есть несколько преимуществ для выбора Google Font API, на которые стоит обратить внимание:

• Шрифт скачивается с сервера Google.
• CDN Google быстрее чем ваш сайт.
• От повсеместного использования шрифты будут кешироваться за счет того, что имеют одно расположение (сервер Google).

Единственный видимый минус Font API, это небольшое количество шрифтов, но инструмент новый, и я думаю, количество доступных шрифтов будет со временем увеличиваться.

Источник: http://designshack.co.uk/