Веб-шрифты Google и их применение

Дорогие молодые вебмастера!

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

GoogleFonts

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

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

На моем сайте я применил шрифт Google под названием "Philosopher" для заголовков статей. Видите, они отличаются от остального текста?

Вообще пользование этими шрифтами предельно простое и я сейчас расскажу все по порядку.

1. Выбор шрифтов

Заходим в сервис Google Web Fonts. Видим полный набор шрифтов, который сейчас насчитывает 617 семейств латинских шрифтов. Тут есть на любой вкус.

GoogleFonts1

Но нам с вами, вероятно, нужны в основном кириллические шрифты. Поэтому слева в выпадающем списке Script выбираем Cyrillic. Кириллических оказывается пока только 46. Со временем эта коллекция пополняется (на этапе бета версии их было всего 8).

GoogleFonts2

Вы видите образцы текста с тестовой фразой «В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!», которую вы можете заменить на свою, либо просто на название шрифта. В качестве образца вы можете переключиться с фразы на показ слова, абзаца или постера (рекламного заголовка) и выбрать другой размер шрифта. Это дает вам возможность выбрать подходящий вам шрифт или несколько шрифтов. Затем вы нажимаете копки Add to Collection и выбранные шрифты оказываются внизу страницы в Коллекции.

GoogleFonts3

2. Обзор выбранных шрифтов                      

Нажимаете кнопку Review внизу и отрывается страница подробного просмотра выбранных на предыдущем шаге шрифтов.

GoogleFonts4

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

3. Использование шрифтов

Приступаем к завершающему этапу.

Жмем на кнопку Use и слева видим все выбранные шрифты и отмеченные галочками разновидности их начертаний и жирности.

GoogleFonts5

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

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

GoogleFonts6

Еще ниже в пунктах 3 и 4 видим два фрагмента кода, которые и нужно вставить на страницы вашего сайта.

GoogleFonts7

Первый код типа

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

нужно вставить на страницы сразу после открывающего тега <head> (можно любым из предложенных трех способов), второй типа

font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif;

обычно вставляется в файлы каскадных таблиц стилей (CSS) в оформление нужного элемента (например, в тег H1 или в необходимый класс или селектор и т.п.).

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

На сегодня все. Удачи вам в разработке хороших сайтов.

Если вас интересует излагаемая мной тематика статей, то вы можете подписаться на рассылку новостей на моем сайте. И тогда вы точно ничего не пропустите.


Поиск по сайту
Поиск от Яндекса
Рассылка

Информационный портал Subscribe.ru

Дорогие друзья!
Вы можете подписаться на рассылку материалов сайта GeoDum.ru через сервис рассылок информационного портала Subscribe.ru. Она называется, как и сайт, "Сказки старого юзера". В рассылке представляются анонсы наиболее интересных материалов из различных разделов. Обычная периодичность рассылки - раз в неделю (по вторникам).

ПОДРОБНЕЕ...

Заработок

Хотите заработать на своем сайте? Тогда зарегистрируйтесь на этих ресурсах по моим реферальским ссылкам:

  • Kwork - магазин услуг фрилансеров.
  • MegaIndex - бесплатный анализ сайта.
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
  • Webartex - заработок на написании и размещении статей.
gototop