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

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

Сервис 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 строчку с кодом.
    @import url(https://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic);
    
  3. Javascript – вариант для тех, кто хочет внедрить шриф в отдельную страницу, либо для тех, кто создает скрипт, использующий определенный шрифт. Просто вставляете выданный код в нужное место шаблона.
  4. [info txt=”Новичкам, да и всем, кто использует WordPress, рекомендую пользоваться самым простым, стандартным, первым вариантом.”]

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

h1 {
  font-family: 'PT Sans', sans-serif;
}

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

[demo url=”http://www.google.com/webfonts” title=”Google Web Fonts”]
Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

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

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

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

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*