Главная › Новости

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

Опубликовано: 01.09.2018

Google Fonts и подключение к сайту

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

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

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

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

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

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

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

A Quick Guide To Using Google Fonts

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

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

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

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

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

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

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

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

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

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

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

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

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

Скачав к себе на компьютер файл, надо закачать его на хостинг. Так выглядит сам файл.

Загружаем его в активную тему, для удобства советую сделать папку fonts если ее нет. Так выглядит путь до папки с темой и созданная fonts (закрасил название синим, так как сайт не мой).

Далее прописываем название. Можно через стандартный редактор вордпресса, вставляем в любое место кода такого типа. @font-face {font-family:'Chocolate cyr-lat';src: url('http://ваш домен/wp-content/themes/активная тема/fonts/Chocolatecyr-lat.otf(название)');}

Чтобы было понятнее прилагаю скриншот на русском.

Далее к необходимым элементам прописываем стиль. В этом поможет font.

В примере я присоединил шрифт с гугл фонтс к блоку luchshie, а именно к элементу p, то есть параграфу. Для данных действий необходимы хоть малейшие знания CSS.

P.S. Видео обзор подробного подключения.