Google Fonts — это крупнейшая в мире библиотека бесплатных веб-шрифтов с открытым исходным кодом. Для дизайнеров, веб-разработчиков и обычных пользователей это настоящая находка: тысячи шрифтовых гарнитур, которые можно легально использовать как в личных, так и в коммерческих проектах.
Однако у многих возникает вопрос: как найти шрифт, который поддерживает русский язык (кириллицу), как установить его на компьютер для работы в Word или Photoshop, и как правильно подключить к сайту, чтобы он не «тормозил» загрузку?
В этом пошаговом руководстве мы разберем все нюансы работы с Google Fonts.
Не все шрифты в мире поддерживают русский алфавит. Чтобы не тратить время на проверку каждого, нужно использовать встроенный фильтр на сайте Google.
.zip архив со всеми начертаниями (жирный, курсив, тонкий и т.д.) в форматах .ttf и .otf.Перед использованием шрифта в программах (Word, Photoshop, Figma) его нужно установить в систему. Не забудьте распаковать скачанный .zip архив!
.ttf или .otf).Ctrl + клик) и выберите «Открыть с помощью» → Font Book (Шрифтовая книга).
Для веба скачивать и устанавливать шрифт на компьютер не обязательно. Google предоставляет специальный сервер (CDN), который отдаёт шрифты прямо в браузер посетителя.
Важное примечание: современный API Google Fonts автоматически определяет язык пользователя и подгружает только нужные символы (в том числе кириллицу), что экономит трафик.
Это самый быстрый и простой способ.
<head> вашего HTML-документа до подключения ваших основных стилей:<code><!-- Оптимизация: предварительно подключаем домены Google --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- Сама ссылка на шрифт (пример для Roboto) --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>
<code>body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* Жирное начертание */
}</code>
@import)Если у вас нет доступа к HTML-коду (например, в некоторых конструкторах), можно подключить шрифт прямо в CSS-файле.
В самом начале вашего файла style.css добавьте:
<code>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}</code>
Если вам важна максимальная скорость загрузки, приватность пользователей (GDPR) или сайт работает в локальной сети без интернета, шрифт нужно скачать и положить на свой хостинг.
.woff2 файлы)..woff2 в папку на вашем сервере (например, /fonts/).@font-face в CSS:<code>@font-face {
font-family: 'MyLocalFont';
src: url('/fonts/roboto-v30-cyrillic-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* Важно! Показывает системный шрифт, пока грузится ваш */
}
body {
font-family: 'MyLocalFont', sans-serif;
}</code>
header.php) для вставки <link> тега, либо использование настроек темы.font-display: swap;. Если вы подключаете шрифт через Google API, этот параметр уже прописан автоматически (обратите внимание на &display=swap в конце ссылки). Он говорит браузеру: «Сначала покажи текст стандартным шрифтом, а когда скачается красивый — замени его». Это спасает от эффекта «невидимого текста» при плохом интернете.Google Fonts — это безопасный, бесплатный и невероятно удобный инструмент. Фильтр по Cyrillic избавит вас от проблем с «кракозябрами» вместо русских букв, а правильная настройка preconnect и swap обеспечит вашему сайту высокие баллы в Google PageSpeed Insights. Выбирайте, скачивайте и делайте ваш дизайн уникальным!