Выбор и интеграция шрифтов: Google fonts (гугл фонтс)

История и миссия Google Fonts

Google Fonts был запущен в 2010 году с целью улучшения веба через доступ к качественным шрифтам. Сервис предлагает бесплатный доступ к огромной коллекции шрифтов, которые можно легко интегрировать в любой веб-проект. Миссия гугл фонтс заключается в том, чтобы сделать интернет более красивым, быстрым и открытым через дизайн шрифтов.

Преимущества использования Google Fonts

Большой выбор шрифтов

Google Fonts предлагает более 1000 шрифтовых семейств, что дает веб-дизайнерам свободу выбора и возможность найти идеальный шрифт для любого проекта.

Простота интеграции

С помощью API Google Fonts шрифты можно легко добавить на сайт, используя HTML или CSS. Это упрощает процесс разработки и позволяет дизайнерам сосредоточиться на творчестве.

Оптимизация для Web

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

Открытый исходный код

Большинство шрифтов в Fonts Google имеют открытую лицензию (open source), что позволяет их свободно использовать, изменять и распространять.

Работа с Google web fonts

Быстрый выбор (фильтрация) гугл шрифтов онлайн

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

1. В «Предварительный просмотр / Preview» пишем какой нибудь текст на языке (х) которые будут использоваться на сайте
2. В фильтре выбираем основной «Язык / Language»: Cyrillic — кириллица (шрифты поддерживающие русский язык);
3. В «Декоративная обводка / Decorative stroke» — выбираем:
   — «Без засечек / Sans Serif» (для Web сайта)/  категорию — самая популярная ;
   Так же можете выбрать Serif / Засечки и Slab Serif / Шрифт с засечками, если ищите шрифты для других целей.
4. сортируем (при необходимости) по Trending / Тенденции, Most popular / Самые популярные, Newest / Самые новые и Name / Имя.

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

11 лучших кириллических шрифтов: Roboto, Montserrat, Open Sans, Roboto Condensed, Source Sans Pro, Rubik, Oswald, Merriweather, Noto Sans, Yanone Kaffeesatz, Caveat.

Выбор нужных шрифтов

Чтобы выбрать необходимый шрифт (ы) нажмите на него.

На открывшейся странице кликаем по кнопе «Get font»:

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

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

После того как вы нажали по кнопке «Get font», откроется страница, где вы можете скачать его на ПК нажимаем на «Download all / Скачать все»

Качаются все начертания в формате ttf:

Их можно установить в операционную систему (например в Windows) и использовать в программах Word, Adobe Photoshop и прочих. Но на сайте я бы не стал использовать данный формат. По этому смотрите ниже альтернативный вариант: google webfonts helper.

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

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

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

Данный способ на мой взгляд самый оптимальный! После того как подобрали шрифт, перешли в него, нажали по кнопке «Get font», откроется страница, там щелкаем на кнопку «Get embed code».

Откроется страница (или вкладка) «Embed code», в левой стороне при необходимости убираем ненужные начертания (так мы увеличим скорость получения шрифтов на сайте)

Далее справа во вкладке «Web» увидите 2 варианта подключения: через тег <link> и @import.

В первом случае добавляем теги <link> в html секцию head. Пример.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">

После чего открываем таблицу стилей где нибудь сверху добавляем стили начертании:

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

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

body{font-family:'Roboto', sans-serif;}

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

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap')
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}
body{font-family:'Roboto', sans-serif;}

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

К примеру Вы хотите чтобы на сайте было 2 шрифта, один для всех текстов, а другой для всех заголовков, тогда возвращаемся на главную (щелкая по лого), снова применяем нужные фильтры (если они сбились — обычно остаются прежними), выбираем 2й шрифт, переходим в него.

Добавляем его в корзину нажав на «Get font»

На открывшейся странице снова жмем на «Get embed code», снова при необходимости убираем ненужные начертания и получаем уже объединенный код.

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

body{font-family:'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6{font-family:'Russo One', sans-serif;}

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

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

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

Идем на сайт gwfh.mranftl.com/fonts вбиваем в окно поиска название шрифта. После чего выбираем нужный результат. Далее выбираем кодировку (Select charsets) и размеры (Select styles).

Ниже выбираем поддержку браузеров: по умолчанию должно быть выбрано (Modern Browsers / современные браузеры) — рекомендую оставить его, особенно, если поддержка старых браузеров неактуальна. В противном случае Переключитесь на Legacy Support (Устаревшая поддержка) или Historic Support (Историческая поддержка). Копируем CSS код в таблицу стилей, скачиваем шрифт и затем заливаем его на сайт.

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

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

/* roboto-regular - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-cyrillic_latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-cyrillic_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

@font-face { 
 font-family: "любое_имя";
 font-style: normal;
 font-weight: normal; url("../fonts/путь_до_файла.ttf") format("truetype");
 display: swap; 
}

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

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

Заключение

Google Fonts представляет собой мощный инструмент для веб-дизайнеров, предоставляющий бесплатный доступ к широкому выбору качественных шрифтов. Благодаря своей простоте, разнообразию и качеству, этот сервис остается одним из наиболее популярных и предпочтительных выборов для создания привлекательных и функциональных веб-сайтов.