Шрифтовый сервис Google

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

Пока вся эта штука помечена меткой beta, поэтому гарантировано работает только в Хроме, ФФ и Сафари.

В быстром старте мы с вами можем наблюдать, что АПИ шрифтов простое, как три копейки. Вот пример:


  
    
  
    Ololo, username!

Строкой link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" мы подключили CSS, которое описывает шрифт и дает ссылку на него.

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('https://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

Теперь можно смело этим шрифтом щеголять:

Ololo, username!

Удобно. Можете потыкать мышкой, чтобы убедиться, что это не картинка, а действительно текст. Если не верите, давайте приподнимем текст над страницей немного.

.fontex2 {
    ...
    text-shadow: 4px 4px 4px #aaa;
}

Look at me! I’m flying. Yoopeeeee

Полный каталог шрифтов, который можно получить по API, смотрите тут: http://code.google.com/webfonts

Можно запросить сразу несколько шрифтов в одной ссылкой. Например, так можно позвать шрифты Tangerine, Inconsolata, и Droid Sans:

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

По умолчанию, подгружается только обычное начертание, жирный или курсив надо просить специально. Через двоеточие от имени шрифта, а несколько начертаний одного шрифта разделять запятой:

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

Можно сокращать bold до b, italic до i, а bolditalic до bi.

Некоторые шрифты поддерживают разные наборы символов. К примеру, можно позвать шрифт Philosopher с поддержкой кириллицы, добавив параметр subset:

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

Вот такой шрифт:

Бороться и искать, найти и перепрятать

Если нужны и латинские и кириллические символы, пишем через запятую:

subset=latin,cyrillic

Полный контроль веб-разработчики могут получить с Веб-загрузчиком шрифтов — библиотекой javascript, которая позволяет загружать шрифты от разных провайдеров и контролировать отображение текста по мере загрузки шрифтов.

В общем, вещь полезная. Надо брать.

Кстати, у меня тут забавная ситуация. При попытки входа в каталог шрифтов, Гугль пишет, что мой браузер не поддерживается и предлагает скачать Хром, либо использовать ФФ или Сафари. Но шутка в том, что хожу я через последнюю nix-версию Хрома.

В ФФ так же картинка. Но загрузка шрифтов и их отображение работает.

Похожее