@font-face и Google Web Fonts

15.05.2011

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

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

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

Google Web Fonts Home page

Google Web Fonts Home page

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

Выбираем тип шрифта

Выбираем тип шрифта

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

Список шрифтов google fonts

Список шрифтов google fonts

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

Предварительный просмотр шрифта

Предварительный просмотр шрифта

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

Параметры шрифта

Параметры шрифта

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

Окно предварительного просмотра

Окно предварительного просмотра

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

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

Код HTML и CSS

Код HTML и CSS

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

Добавление начертаний

Добавление начертаний

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

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

Надеюсь, информация была полезной и вы узнали что-то новое

follow us in feedly

,

Комментариев: 27

  1. Mikhail Yevstafiev

    Здравствуйте!Я новичок-аматор. На днях сел делать проект,в котором участвуют шрифты PT Sans и PT Sans Bold.Подключил их с помощью вышеупомянутого сервиса Гугл. И работает только один из них: то есть тот,код которого в head написан ниже,а мне нужно чтобы они отображались одновременно и независимо друг от друга.Подскажите,где я неправ?Спасибо большое.

    Ответить
  2. Alex

    Отстой. Кириллических шрифтов вообще мало и все какие-то почти одинаковые. Выделяющихся всего пара-тройка. Буржуи они и в Африке буржуи. Латиницы зато — хоть одним местом жуй. Разве нельзя русских шрифтов наделать? Вроде не последний язык в нете по популярности(. В общем, не понравилось.

    Ответить
    • GerinG

      Ну так а к механизму какие вопросы ))) Тут надо авторов спрашивать, наши не сильно хотят свои шрифты отдавать, а западным какой смысл забесплатно рисовать русский шрифт? А коммерческих шрифтов много, рисуют.
      Так что ваша претензия не к Гуглу )))

      Ответить
  3. Иван

    У меня с сегодняшнего дня Firefox перестал отображать шрифты Google Web Fonts, показывает стандартные. Почему так?

    Ответить
    • GerinG

      Без понятия, что у вас случилось. Только что поставил специально FF, проверил — все отлично отображается, как на родном сайте Google Web Fonts, так и на этом блоге

      Ответить
      • Иван

        Даже не самом сайте Web Fonts все шрифты отображает одним шрифтом. Через Chrom посмотрел — вообще вместо примеров пустота. Что это такое может быть? Стоит KIS 2012 лицуха. Вирусов вроде нет. Пробовал отключать антивирь — без изменений. Вот это подстава, верстаю сайт и такой сюрприз мне. Главное непонятно вообще почему так

        Ответить
  4. GerinG

    Не люблю Куфон в любом виде. Избыток JS до добра не доводит. Уж лучше веб-безопасными шрифтами обойтись, чем перегружать страницу ЯваСкриптом.

    Ответить
  5. Валерий

    В Гугле очень ограничен выбор шрифтов с поддержкой кирилицы. Попробуйте плагин All-In-One Cufon. Все просто, и в сети популярно расписано как им пользоваться)

    Ответить
  6. GerinG

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

    В данном случае Гугл просто дает возможность вебмастеру использовать свое хранилище, только и всего

    Ответить
  7. Антон

    Ну просто пишут, что мол когда шрифта нету у пользователя, то браузер предлагает ему закачать его… Я просто с таким не ставкивался. А когда 100 лет назад надо было шрифт сделать, я юзал cufon.

    Ответить
  8. GerinG

    Гугл предоставляет свое API, по сути. То есть для внедрения вам нужно добавить несколько строк в ваш код сайта.
    Я не понял насчет примера, что вы хотите увидеть, расскажите подробнее

    Ответить
  9. Антон

    Я новичок в работе со шрифтами в вебе. Можете кинуть пример сайта где меня просят загрузить шрифт. Я не понял гугл избавляет как-то от этого?

    Ответить
  10. sorbing

    Товарищи, подскажите почему при подключении через API гугл отдает шрифт в формате .woff, а при скачивании в .ttf? Как же IE, хотя бы 9-й..

    Ответить
    • Виктор Милашечкин

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

      Ответить
      • sorbing

        Спасибо за ответ. Я вот прикидываю по подключению коллекции шрифтов — вероятность что кто-то еще наберет коллекцию, которую мы используем на нашем сайте крайне мизерна. Получается что на предварительное кеширование пользователем такой же коллекции шрифтов (на другом сайте) можно не расчитывать. В таком случае есть резон подключать необходимые шрифты отдельно. Верно ли это? Хотя при подключении коллекции шрифты вроде подгружаются каждый отдельно (в результирующем CSS)… Что Вы думаете по этому поводу?

        Ответить
  11. A347

    К сожалению, иногда меняется кодировка на нечитаемые значки при длительном бездействии браузера. Обновление кэша часто решает проблему. А вот в новой версии FireFox приходится закрывать браузер и снова открывать, чтобы внедренные гугловские шрифты стали читабельными.  Причем в некоторые периоды шрифт ломается даже при не очень долгом бездействии браузера. Возможно, это связано с нагрузками в Сети.

    Другие WebFonts, размещенные на своем сервере, при этом отображаются нормально, сбоев не было ни разу. Конечно, скорость показа страниц теряется, но иногда ею приходится жертвовать.

    Ответить
  12. Foo

    Вы правда считаете, что вот этот кусок гумна с закладками для соц.сетей самосмещающийся действительно более важный чем меню сайта???

    Ответить
    • Виктор Милашечкин

      А с чего вы взяли, что я так считаю? Если вы не увидели меню на привычном месте, может на это есть причина? Например, спор в виде эксперимента, который заканчивается через неделю

      Ответить
  13. SwaEgo

    У меня в шаблоне по умолчанию были некоторые небезопасные шрифты,но реализация…5 js и кириллицу не поддерживают,отключил на фиг.У Гугла всё более человечно организовано.

    Ответить
  14. GerinG

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

    Но, возможно, я подключу шрифт Ubuntu. Он мне весьма симпатичен

    Ответить
    • Alex Ivanov

      > у меня обычная Georgia

      лол, это для кого она обычная? только для пользователей уиндоуз, у меня например этого шрифта нет

      Ответить
      • GerinG

        От того, что у вас его нет, он не прекращает быть официальным веб-безопасным шрифтом

        Ответить
  15. Ava

    Отличный сервис! Гугл я смотрю вообще молодец)
    А на Вашем блоге случайно не гугловские шрифты?

    Ответить