Google web fonts – использование нестандартных шрифтов в веб-дизайне

Опубликовано: 15 Июнь 2013 в рубрике Полезный софт, Шрифты   Tags: , , ,

Канули в лету времена, когда наш брат ограничивал себя выбором системных шрифтов, которые ужасно приелись. Сотни тысяч шрифтов загружено в сеть на данный момент, а типографика в веб держалась в рамках унылых системных гарнитур. Это было так грустно…
Прощай, унылая пора! Привет, Google Web Fonts – сервис, адаптирующий шрифты для веб-сайтов.
В три шага вы преобразите свой сайт, не загружая файла .ttf на сервер.
Итак, что нужно знать о Google Web Fonts
Сервис адаптировал сотни бесплатных шрифтов для веб, в том числе и кириллицу.
Интерфейс удобно делится на 3 части: Choose/Выбор, Review/Просмотр, Use/Использование

Во вкладке Choose слева имеются настраиваемые фильтры

В категориях выбираем тип шрифтовой формы (засечки, без засечек, рукописный). Ниже настроим насколько жирный/тонкий/наклонный должен быть искомый шрифт.
В меню Script помимо латиницы и кириллицы (и их расширенных версий), мы можем порадоваться кхмерскому, вьетнамскому и греческому. А вдруг. В превью мы можем также задать панграмму или фразу, которая нас интересует конкретно.

Когда выбрали нужную гарнитуру, во вкладке Review посмотрим на нее во всех возможных ипостасях.

Окончательно утвердившись в своем выборе, переходим во вкладку Use
1. Выбираем начертание шрифта, которое вы хотите использовать на сайте (или несколько).
2. Ставим галки напротив версии шрифта – кириллица, латиница или что-то одно.
3. Копируем сгенерированный html-код между тегами на ваш сайт.

4. Сервис также сгенерировал нам CSS, которые мы должны вставить в правильное место в файле таблицы стилей.

Например, нужно, чтоб на вашем сайте данным шрифтом отображались заголовки первого порядка (h1), ищем в файле style.css h1 и подставляем свойство, например, как тут:

Готово. Вы восхитительны.