Google fonts | гугл шрифты


Google fonts | гугл шрифты

Подключение google шрифтов к сайту

Сайтостроение

Сегодня мы поговорим о сервисе Google fonts (гугл шрифты) — как с ним работать: как выбирать, скачивать и подключать к сайту шрифты — бесплатно.

Быстрый выбор гугл шрифтов онлайн

Идем на сайт fonts.google.com, в фильтре сверху выбираем:

  1. категорию — самая популярная Sans Serif;
  2. нужный язык (Cyrillik -русские / кириллические);
  3. сортируем (при необходимости).

Google Fonts

Примечание: можно ничего не выбирать, шрифты которые поддерживают кириллицу будут написаны на русском, а не поддерживающие на английском.

Самые топовые кириллические шрифты: Roboto, Montserrat, Open Sans, Roboto Condensed, Source Sans Pro, Rubik, Oswald, Merriweather, Noto Sans, Yanone Kaffeesatz, Caveat.

Как скачать гугл шрифты

Выбрали шрифт, щелкнули по нему. На открывшейся странице в верхней части экрана нажмите на кнопку «Download family».

скачиваем шрифт с google fonts

Качаются все начертания в формате ttf — можно использовать в word, фотошоп и прочих программах, но на сайте я бы не стал использовать данный формат. По этому смотрите ниже альтернативный вариант: google webfonts helper.

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

Есть несколько способов подключения, рассмотрим каждый.

Подключение через fonts google api

Данный способ на мой взгляд самый оптимальный!. После того ка подобрали шрифт, идем на его страницу и выбираем начертания после чего сбоку увидите вкладку с 2 табами, нажимаете на Embed и там увидите 2 варианта подключения: через тег и @import.

пример подключения шрифта через google font api

стандартное подключение шрифта

Затем подключаем шрифт для нужных блоков или сайта целиком в таблице стилей. Пример css кода для всего сайта.

Во втором случае сразу открываем файл стилей и прописываем в него подключение.

подключение через import

Пример CSS стилей:

подключение через @IMPORT

подключенный гугл шрифт

Подключение нескольких шрифтов одновременно при помощи api

К примеру Вы хотите чтобы на сайте было 2 шрифта, один для всех текстов, а другой для всех заголовков, тогда щелкаем на вкладку «Browse fonts» выбираем еще один шрифт, затем его начертания и получаем уже объединенный код.

добавляем 2 шрифт через api

Пример CSS стиля для подключения общего шрифта ко всему сайту и второго шрифта к заголовкам.

Если возникают какие нибудь проблемы с одновременным подключение шрифтов, то обратитесь к документации по API.

Качаем шрифты для WEB при помощи google webfonts helper и подключаем их к сайту.

Рекомендую для веба подключать только форматы woff и woff2 — они самые быстрые и поддерживаются всеми современными браузерами: Chrome, Firefox, IE 9+, Safari.

Идем на сайт google-webfonts-helper.herokuapp.com/fonts/ вбиваем в окно поиска название шрифта. После чего выбираем нужный результат. Далее выбираем кодировку (Select charsets) и размеры (Select styles). Ниже выбираем поддержку браузеров: все (Best Support) или только современные (Modern Browsers) — лучше данный вариант. Копируем CSS код в таблицу стилей, скачиваем шрифт и затем заливаем его на сайт.

google webfonts helper

Важно! По умолчанию опция Customize folder prefix (optional) стоит ../fonts/, следовательно чтобы шрифты подключались к сайту, вы должны залить их в папку fonts, а эта папка должна лежать в той-же директории, что и папка /css вашего сайта. И да вы можете поменять значение по умолчанию, чтобы код перегенерился!

распаковываем шрифты

Пример CSS кода стандартного подключение скачанных шрифтов.

Если к примеру у вас 1 ttf шрифт (нет woff, eot, …), то подключение будет выглядеть так.

здесь display: swap ; — это так сказать рекомендация гугла по оптимизации скорости.

Вот и все. Если что то не понятно можете заглянуть в руководство от гугла.


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

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