Гугл фонтс (google fonts): как подключить и настроить

Дата: / Автор поста:

как скачать и где найти гугл шрифты Занятная вещь гугл фонтс, можно подобрать на любой вкус шрифт. Компания google давно ведет проект и развивает. Буквально год назад кириллица была в 5 вариантах, сейчас насчитывается более 50. Разберемся как создать, скачать и прикрепить.

Настраиваем шрифт

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

Поиск: русские шрифты, их стало больше

Сходу видим список (представлены и русские шрифты). Видов много, поэтому надо применить фильтры в правой колонке.

изменяем шрифт

  1. Категории.
  2. Стиль написания, с засечками, без них, машинописный и другие.
  3. Сортировка, по тенденциям, по дате добавления, по алфавиту и по популярности.
  4. Язык. (для русских выставляем cyrillic).
  5. Количество форм (курсив, жирный и т.д.).
  6. Толщина.
  7. Скос.
  8. Ширина.

С 5-8 пункт настраиваем с помощью бегунка и поставленной галочки в чекбоксе. В верхнем правом углу есть поиск, вставляйте туда название и сревис найдет подходящий вариант, есть даже мой любимый open sans.

Предварительный просмотр

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

  1. Область применения (абзац, заголовок).
  2. Стиль написания (толстый, легкий, наклонный).
  3. Размер.
  4. Переход в меня настроек и скачивания.

Нажимая 4 кнопку перебросит на страницу применения и настройки.

Советую прочитать как создать мем онлайн, как сделать градиент на css  и ускорить сайт.

Гугл фонтс: конечная настройка или как скачать

русские шрифты добавляемПосле предварительного просмотра на гугл фонтс, либо можем скачать, либо настроить вывод скрипта. Нажимаем на кнопку с плюслм и надписью «select this font», выбрал популярный roboto. Внизу появится всплывающее окно нажимаем и видим инструкции.
скачать шрифты или разработка

  1. Кнопка скачать на компьютер.
  2. Embed вкладка настройки интеграции, custimize доработка (величина и язык).
  3. Советую выбрать standart.
  4. Если решите внедрять на сайте через загрузку с гугл фонтс, то надо вставить код в раздел header.
  5. CSS стиль, который надо прописать к письменным элементам (как сделать смотрите ниже).

Подключить через гугл фонтс

В прошлом разделе нашли код начинающийся с link, чтобы подключить, вставляем в раздел head перед закрывающим тегом.

как скачать с google fonts

Пол дела сделали, теперь присоединяем к элементу. Берем второй код и вставляем в файл style.css (если на wordpress, на остальных движках не знаю где).

веб способ прописать css

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

Ручной метод для сайта

Скачав к себе на компьютер файл, надо закачать его на хостинг. Так выглядит сам файл.
roboto стильЗагружаем его в активную тему, для удобства советую сделать папку fonts если ее нет. Так выглядит путь до папки с темой и созданная fonts (закрасил название синим, так как сайт не мой).
подключить шрифтДалее прописываем название. Можно через стандартный редактор вордпресса, вставляем в любое место кода такого типа.

@font-face {font-family:'Chocolate cyr-lat';src: url('http://ваш домен/wp-content/themes/активная тема/fonts/Chocolatecyr-lat.otf(название)');}

Чтобы было понятнее прилагаю скриншот на русском.
font-face для сайтаДалее к необходимым элементам прописываем стиль. В этом поможет font.
open sans кириллицаВ примере я присоединил шрифт с гугл фонтс к блоку luchshie, а именно к элементу p, то есть параграфу. Для данных действий необходимы хоть малейшие знания CSS.
P.S. Видео обзор подробного подключения.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Татьяна

    Полезная информация, спасибо за видео, но у меня ни чего не получилось)) видимо хорошо не разобралась, пока эта функция без надобности, но если что буду обращаться к вам ;-)

    • Лифанов Валентин

      Если что милости прошу :)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.