Рассылка сайта
RSS ленты

feed-iconПодпишитесь на любую из RSS-лент и всегда будете в курсе новостей:

Все новости сайта
Сказки Старого Юзера
Мир Андроида

Хотите получать обновления по почте?
Введите ваш e-mail:

Веб-шрифты 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 или в необходимый класс или селектор и т.п.).

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

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

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


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

Поиск
Сайт в соцсетях
vk_logofacebook_logotwitter_logogoogle_plus
 
Переводчик
Комментарии
  • GeoD 01.07.2014 20:57
    А пользоваться поиском Google или помощью по Facebook умеете? Если нет, то вот вам ссылка, как ...

    Подробнее...

  • Павел 01.07.2014 20:41
    Но как мне удалить свой аккаунт, если я не помню пароль от него, помню только номер, к которому ...

    Подробнее...

  • Amazonka 25.06.2014 16:01
    а если поставить счетчик Яндекс.Метрики на http://www.home-engineer.ru ? проблем не будет? а то ...

    Подробнее...

  • GeoD 30.05.2014 19:23
    Мурат, а вы обратили внимание на дату создания этой статьи? Поэтому здесь приведены возможно уже ...

    Подробнее...

  • Мурат Токонович 30.05.2014 18:21
    Мне больше понравился http://colorschemedesigner.com/

    Подробнее...

  • Мурат Токонович 30.05.2014 18:07
    Комментарий к фаейрволлу Agnitum... Я, как старый инженер, а ныне юрист, рекомендую. Если Вы чайник и ...

    Подробнее...

  • Роман 12.05.2014 09:52
    А если при прошлом удалении рута не работают гугл сервисы.

    Подробнее...

  • TED 11.05.2014 09:52
    вот тут все подробно описано как получить рут при KNOX http://youtu.be/2G9zwTBrFIE

    Подробнее...

Рассылка новостей

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

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

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

Связаться с автором? Просто

Если вам нужно связаться с автором сайта по вопросам, не вмещающимся в рамки комментариев, пожалуйста, пишите на email, пользуясь Формой письма на странице Контактов >> Форма обратной связи.

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

Заработок на сайте

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

  • Profit-Partner - хороший заработок на контекстной рекламе от Яндекса;
  • TrustLink - биржа ссылок, дает неплохой доход для вебмастеров;
  • Sape - еще одна биржа покупных ссылок;
  • MegaIndex - бесплатный анализ сайта;
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
Cloudim - онлайн консультант для сайта бесплатно.
Полезное
   
RSSTranslator.Net
gototop