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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body{font-family:'Roboto', sans-serif;}

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

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

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

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

Если возникают какие нибудь проблемы с одновременным подключение шрифтов, то обратитесь к документации по 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 код в таблицу стилей, скачиваем шрифт и затем заливаем его на сайт.

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

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

@font-face {
 font-family: 'Имя_шрифта_любое';
 src: url('Имя_файла_шрифта.eot');
 src: url('Имя_файла_шрифта.eot?#iefix') format('embedded-opentype'),
 url('Имя_файла_шрифта.woff') format('woff'),
 url('Имя_файла_шрифта.ttf') format('truetype'),
 url('Имя_файла_шрифта.svg#DSNoteRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}

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

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

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

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