Бесплатные шрифты Google WebFonts

Что общего между свойством CSS @font-face и Google Web Fonts?
@font-face позволяет использовать свои шрифты (не веб-безопасные шрифты) при отображении сайта, Google дает нам инструмент для быстрого внедрения. Этот самый Google создал онлайн хранилище шрифтов, чтобы мы с вами могли их использовать в своих работах. Самое главное — все шрифты абсолютно бесплатны и на 100% легальны. Profit

Итак, как это все работает?

Заходим по адресу http://www.google.com/webfonts

Выбираем тип шрифта, который нам нужен (кириллица и латинница думаю будут актуальны у нас. Или есть люди из Камбоджи и Греции?)

Опишу работу со шрифтами, содержащими кириллицу, все же родной язык. Кириллических шрифтов в хранилище Google всего 8, очень мало. Но я надеюсь, что работы в этом направлении ведутся. Порадовала Canonical (компания, выпускающая Ubuntu), предоставив в свободный доступ фирменный шрифт из ОС Ubuntu 10.10. Open Sourсe это хорошо.

Выбираем нужный шрифт из хранилища Google fonts и запускаем предварительный просмотр, там можно настроить параметры выбранного шрифта (размер шрифта, курсив или жирный шрифт) и сразу получить код для своего сайта.

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

В окне предварительного просмотра контролируем полученный результат.

Ниже код, который нам и нужен для сайта. Использовать его можно с некоторыми оговорками. По умолчанию, Google подключает все доступные начертания, иногда это лишнее. Код CSS тоже можно почистить, удалив те селекторы, которые не настраивали в окне параметров.

Как видим селектор который отвечает за шрифт в css, называется font. Чтоб поменять в css размер шрифта, надо прописать font-size:15px и менять количество пикселов до нужного значение. В css жирный шрифт указывается вот таким селектором: font-weight: bold и так далее.

Нужные начертания и пример использования шрифта для элементов страницы можно выбрать и увидеть на закладке “Use this font”

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

И последнее. Любой шрифт для css из онлайн хранилища можно скачать к себе на компьютер для использования  в системе. И это тоже совершенно бесплатно, попросят только donate(пожертвование), которое может быть и 0$. Тут уже все на вашей совести, каждый для себя решает — платить или нет.