n-wp.ru — блог о WordPress
Как добавить Google Web Fonts в блог | n-wp.ru

Как добавить Google Web Fonts в блог

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

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

Как добавить Google Web Fonts в блог

Установка шрифтов Google Web Fonts не сложнее, чем подключение скрипта, и делается за четыре простых шага.

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

Как добавить Google Web Fonts в блог

Выберем для примера шрифт PT Sans.

Нажмите на Quik Use и сформируйте ссылку на шрифт.

Как добавить Google Web Fonts в блог

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

Как добавить Google Web Fonts в блог

Обязательно отметьте, что хотите использовать не только латинские символы, но и кириллические.

Как добавить Google Web Fonts в блог

После этого скопируйте один из вариантов кода, который сервис вам предложит.

Как добавить Google Web Fonts в блог

Код, загружающий шрифт в блог, можно использовать в трех вариантах.

  1. Standart — этот вариант самый простой: вы копируете предложенный код, и вставляете в файл header.php между тегами [code inline=»yes»]

    . Пример:

  2. @import — вариант для тех, кто хочет импортировать шрифт в файл стилей: добавляете в style.css строчку с кодом.

  3. Javascript — вариант для тех, кто хочет внедрить шриф в отдельную страницу, либо для тех, кто создает скрипт, использующий определенный шрифт. Просто вставляете выданный код в нужное место шаблона.
  4. Новичкам, да и всем, кто использует WordPress, рекомендую пользоваться самым простым, стандартным, первым вариантом.

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

Теперь все заголовки h1 будут использовать шрифт PT Sans, который будет загружаться напрямую из Google Web Fonts.

Посмотреть
Google Web Fonts
вы перейдете по ссылке http://www.google.com/webfonts

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

4 комментария

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

      • В моей Опере не работает ни один из вариантов, показывает шрифт, который даже не упоминается в стилях темы.
        » …добавляете в style.php строчку с кодом. «. Ошибочка.

/* ]]> */