Как скачать шрифты Google fonts

Как скачать Google шрифты, чтобы использовать их локально?

Иногда нужно, чтобы сборка проекта была изолирована от внешних серверов и все стили, скрипты и шрифты использовались со своего сервера.

Удобный сервис, чтобы скачать Google Fonts себе на локальный проект без лишних файлов и с минимальным весом — https://gwfh.mranftl.com/fonts

Все настройки просты и интуитивно понятны.

• Выбираем шрифт, или вводим название необходимого шрифта в окне поиска, выбираем кодировку, которая нам нужна, например cyrillic для криллицы; если русские символы на сайте не ождаются, то можно ничего не выбирать, латиница скачается по умолчанию.
• Выбираем, какая жирность шрифта будет использоваться на сайте, нет смысла подключать все размеры, например, по нашему макету достаточно regular и bold, то есть подключим regular и 700.
• В 2024 году достаточно использовать стили для Modern Browsers, если у кого-то в IE7 не отображаются шрифты и современные стили CSS, то это уже их проблемы. Копируем сгенерированные стили. Сразу можно задать каталог, в котором будут файлы шрифтов лежать, чтобы потом не редактировать код, по умолчанию ../fonts/. Получаем такие стили, которые испольуем отдельным файлом стилей или просто копируем в самое начало своих стилей:

/* 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-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+ */
}

• Далее скачиваем файлы шрифтов и помещаем их в каталог ../fonts/. В моем примере, это всего 2 файла, но может быть и больше: roboto-v30-cyrillic_latin-700.woff2 и roboto-v30-cyrillic_latin-regular.woff2
• Проверяем в консоли, чтобы шрифты подключились без ошибок. Пользуемся шрифтами локально. Иногда это ускоряет скорость загрузки шрифтов, если хорошо настроен сервер.

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