Подключение на сайт шрифтов из Google fonts

В этой статье на примере шрифта Inter мы разберем подключение шрифта в свою тему на сайте. Такое подключение Google рекомендует, в отличие от CDN, как более быстрое и надежное.

Шрифт Inter с поддержкой кириллицы в формате .woff2

Если вы хотите использовать шрифт Inter на сайте и обеспечить поддержку кириллицы (включая украинский алфавит), оптимальным решением будет подключение в формате .woff2.

📥 Удобная загрузка через Google Webfonts Helper

Рекомендую сервис Google Webfonts Helper, который позволяет:

• Выбрать нужные подмножества символов: cyrillic-ext и latin.
• Выбрать стили и веса (например, Regular, Italic, Bold).
• Скачать архив с файлами .woff2 и готовым CSS-кодом.

🗂 Структура файлов

После загрузки у вас будет структура примерно такого вида:

/fonts/
├── inter-regular.woff2
├── inter-italic.woff2
└── inter-bold.woff2

🎯 Подключение в CSS

Ниже пример подключения шрифта через @font-face:

/* inter-100 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-100.woff2') format('woff2');
}
/* inter-100italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-100italic.woff2') format('woff2');
}
/* inter-200 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-200.woff2') format('woff2');
}
/* inter-200italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-200italic.woff2') format('woff2');
}
/* inter-300 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-300.woff2') format('woff2');
}
/* inter-300italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-300italic.woff2') format('woff2');
}
/* inter-regular - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-regular.woff2') format('woff2');
}
/* inter-italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-italic.woff2') format('woff2');
}
/* inter-500 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-500.woff2') format('woff2');
}
/* inter-500italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-500italic.woff2') format('woff2');
}
/* inter-600 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-600.woff2') format('woff2');
}
/* inter-600italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-600italic.woff2') format('woff2');
}
/* inter-700 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-700.woff2') format('woff2');
}
/* inter-700italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-700italic.woff2') format('woff2');
}
/* inter-800 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-800.woff2') format('woff2');
}
/* inter-800italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-800italic.woff2') format('woff2');
}
/* inter-900 - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-900.woff2') format('woff2');
}
/* inter-900italic - cyrillic-ext_latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  src: url('/themes/custom/my-theme/fonts/inter-v18-cyrillic-ext_latin-900italic.woff2') format('woff2');
}

🔧 Альтернатива: конвертация .ttf в .woff2

Если у вас уже есть .ttf-файлы шрифта, можно использовать онлайн-конвертер Transfonter. Он позволяет получить .woff2 и автоматически сгенерировать CSS. При загрузке файлов не забудьте включить опцию Cyrillic.

Используйте этот подход для оптимизации скорости загрузки и корректного отображения шрифта на всех языках.