Использование на сайте шрифтов от Google Fonts

Раньше я уже писал о том, как подключить к своему сайту внешний шрифт. В той статье описывался случай, когда файлы хранятся на самом сайте.

Сегодня рассмотрим вопрос, когда шрифт загружается с хранилища Google Fonts — http://www.google.com/fonts/. Это очень удобный способ — достаточно только подключить с помощью единственной строки кода нужные шрифты и они будут загружаться с сервиса от гугл и отображаться на ваших страницах.

К сожалению, до настоящего момента интерфейс этой службы не поддерживает русский язык.

использование на сайте google fonts

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

Если раньше вы не пользовались этим сервисом, то, в первую очередь, рекомендую обратить внимание на Open Sans и другие шрифты из этого семейства. Обычные тексты в нем очень хорошо смотрятся.

Рассмотрим прочие настройки службы. В верхней части расположены переключатели:

  • Word – слово. Таком режим удобен, так как шрифты выводятся сразу в несколько колонок и можно быстро сравнить их отображение;
  • Sentence – текст в виде предложения (значение по умолчанию);
  • Paragraph – для демонстрации выводится большой кусок текста;
  • Poster – демонстрационный режим, удобный для подбора шрифта, который будет использоваться для заголовков.

Настройки второй строки сверху:

  • Size — размер;
  • Sorting — режим сортировки:
    • Alphabet — по алфавиту,
    • Date added — по дате добавления,
    • Number of style — по количеству стилей,
    • Trending — по частоте использования в последнее время,
    • Popularity — по популярности.

После выбора шрифта вам нужно добавить его в коллекцию (кнопка «Add to Collection»). Затем в нижней части экрана выбрать кнопку Use (использовать).

Далее вы можете выбрать нужные стили для загрузки.

шрифты гугл

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

Далее указываем нужный набор символов. Обычно это латинские и кириллические символы.

fonts3

А еще ниже мы видим выбор способа подключения:

  • Standart,
  • Import,
  • Javascript.

По умолчанию указан Standart. Если воспользуетесь этим случаем, то просто вставьте строку в поле «Add this code to your website» (добавьте этот код на ваш сайт WordPress) куда нибудь в файл header.php (в папке текущего шаблона) между тегами <head> и </head>.

Если воспользуетесь вторым способом — @import, то появившийся код нужно добавить в ваш файл со стилями style.css, который обычно расположен в папке вашего текущего шаблона.

Ну и далее мы видим пример оформления css, как указать подключенный шрифт к какому-либо элементу (в данном случае это тег h1).

fonts4

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

Добавьте комментарий