Шрифты для сайта: как выбрать и подключить, чтобы читалось легко

Какой шрифт выбрать для сайта

Начните не с каталога шрифтов, а с вопроса: что человек делает на вашем сайте. На лендинге услуги он за 10–20 секунд сканирует заголовок, цену и кнопку. В блоге — читает длинный текст. В каталоге — сравнивает характеристики и цифры.

От этого зависят требования к шрифту для основного текста:

• открытые формы букв — «а», «е», «с» не сливаются в мелком размере;
• разборчивые цифры — 3, 6, 8 и 9 не путаются, цифры одинаковой ширины выстраиваются в таблицах;
• полная кириллица — есть «ё», «й», «ъ», кавычки-ёлочки, длинное тире и знак рубля ₽;
• несколько насыщенностей — хотя бы обычный и полужирный.

Шрифт с засечками или без? Для экранов основной текст чаще набирают гротеском, то есть шрифтом без засечек. Шрифты с засечками хорошо работают в заголовках и в длинных текстах на больших экранах: они добавляют солидности юристам, издательствам, ресторанам. Жёсткого правила нет, есть привычка глаза.

Бесплатные шрифты для сайта с кириллицей: проверенный список

Все шрифты ниже доступны в Google Fonts и поддерживают кириллицу на октябрь 2026 года. Перед использованием всё равно проверьте наличие нужных символов в своём тексте: «ё», «₽», «№».

Отдельно о популярной ошибке: Montserrat в основном тексте. Он широкий, буквы геометрические, в 14–16 пикселях на телефоне строка становится длинной, а «о» и «а» похожи. Montserrat хорош в заголовках, а для текста к нему лучше взять более узкий гротеск.

Если сайт собран на Тильде, там есть свои особенности: встроенная библиотека, загрузка собственных файлов, отдельные настройки для мобильных. Мы разобрали их в статье шрифты в Тильде, там же — готовые пары под разные ниши.

Как сочетать шрифты: заголовок + текст

Шрифтовая пара — это шрифт для заголовков и шрифт для текста. Три рабочие стратегии:

1. Один шрифт в разных насыщенностях. Заголовки — полужирным или жирным, текст — обычным. Самый безопасный вариант, подходит большинству сайтов услуг. Пример: Manrope 700 + Manrope 400.
2. Контраст: засечки + гротеск. Заголовки с засечками, текст без. Сразу видно, где что. Пример: Lora для заголовков + Inter для текста.
3. Акцентный заголовок + нейтральный текст. Широкий или необычный шрифт для крупных заголовков, спокойный гротеск для всего остального. Пример: Unbounded + Onest.

Чего избегать:

• Два похожих гротеска. Например, Roboto в заголовках и Open Sans в тексте. Разница видна, но непонятно зачем, и сайт выглядит как ошибка.
• Три и больше шрифтов. Каждый новый шрифт — новый файл и новый голос. Если нужен акцент, хватит насыщенности или цвета.
• Декоративный шрифт в кнопках и меню. Рукописные и стилизованные шрифты хороши в одном слове логотипа, но не в интерфейсе.

Наблюдение из наших проектов: клиенты почти никогда не жалуются на «скучный» шрифт. Жалуются на то, что на телефоне не прочитать цену или текст сливается с фоном. Характер сайта лучше строить фото, цветом и текстами, а шрифт пусть не мешает.

Какой размер шрифта ставить на сайте

Размеры — это половина читаемости. Рабочие ориентиры, которыми мы пользуемся:

Это не стандарт, а практика. Кроме размера важны:

• Межстрочный интервал (line-height). Для текста — 1,4–1,6 от размера шрифта. Для крупных заголовков — 1,1–1,2, иначе строки разваливаются.
• Длина строки. Удобно читать 50–80 знаков в строке. Текст во всю ширину монитора 1920 пикселей читать тяжело, даже если шрифт отличный.
• Контраст. Светло-серый текст на белом фоне выглядит изящно на макете и плохо читается на телефоне на солнце. Основной текст — тёмный, близкий к чёрному, на светлом фоне.
• Начертание основного текста. Обычное (400), не тонкое (300 и ниже). Тонкие начертания на экранах с низкой плотностью пикселей становятся почти невидимыми.

Простая проверка: откройте сайт на своём телефоне на расстоянии вытянутой руки. Если тянет увеличить — шрифт мелкий. Остальные проверки мобильной версии — в статье мобильная версия сайта.

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

Лицензии: какие шрифты можно использовать бесплатно

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

Что проверить:

• Открытая лицензия. Большинство шрифтов в Google Fonts распространяются по SIL Open Font License: их можно бесплатно использовать на сайтах, в том числе коммерческих, встраивать и изменять. Нельзя продавать сам шрифт как отдельный продукт.
• Шрифты ParaType. Семейство PT (PT Sans, PT Serif, PT Mono) распространяется ParaType по открытой лицензии и бесплатно для коммерческого использования. Остальные шрифты ParaType — платные.
• Платные шрифты. Для сайта нужна именно веб-лицензия. Часто её цена зависит от числа просмотров страниц в месяц. Лицензия на печать или на «десктоп» сайт не покрывает.
• На кого оформлена лицензия. Если шрифт купил дизайнер на свой аккаунт, лицензия у него. Попросите оформить на вашу компанию или передать документы.
• Шрифты «из интернета». Если файл скачан с сайта-агрегатора без указания лицензии, считайте, что лицензии у вас нет.

Наш подход для малого бизнеса — брать открытые шрифты. Выбор большой, и вопрос с лицензией закрыт раз и навсегда.

Как подключить шрифт к сайту

Способ зависит от платформы.

Конструкторы (Тильда, другие). Шрифт выбирают в настройках сайта из встроенной библиотеки или загружают свои файлы. Кода писать не нужно.

WordPress и другие CMS. Шрифт задаёт тема. Если в теме нужного шрифта нет, его подключают через настройки темы, плагин или дочернюю тему. Не ставьте плагин ради одного шрифта, если тема умеет загружать файлы сама.

Сайт на HTML и CSS. Здесь два варианта:

1. Ссылка на Google Fonts. Вставляете строку <link> из Google Fonts в код страницы. Быстро, но браузер каждого посетителя обращается к серверам Google, а скорость загрузки зависит от их доступности.
2. Файлы на своём сервере. Скачиваете шрифт, кладёте файлы woff2 рядом с сайтом и описываете их через @font-face в CSS. Этот способ мы советуем: нет зависимости от чужого сервера, и вы контролируете, какие начертания грузятся.

Минимальный пример подключения своего файла:

css @font-face { font-family: "Manrope"; src: url("/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } body { font-family: "Manrope", Arial, sans-serif; }

Строка font-display: swap говорит браузеру сначала показать текст системным шрифтом, а затем подменить его фирменным, когда файл загрузится. Без неё на медленном интернете человек несколько секунд видит пустой экран без текста. Подробно свойство описано в документации MDN.

После "Manrope" в примере стоят запасные шрифты: Arial и общий sans-serif. Если файл не загрузится, текст всё равно отобразится.

Шрифты и скорость загрузки сайта

Каждое начертание — отдельный файл в десятки килобайт. Типичная картина на разборах: подключены все девять насыщенностей шрифта плюс курсивы, а используются три. Всё это грузится до того, как текст на первом экране станет «красивым».

Что помогает:

• Только нужные начертания. Обычно хватает 400, 600 или 700 и, может быть, 500.
• Формат woff2. Он легче старых форматов ttf и woff, его поддерживают все современные браузеры.
• Только нужные наборы символов. Кириллица и латиница. Греческий, вьетнамский и расширенные наборы сайту в России не нужны.
• Переменный шрифт. Если у шрифта есть вариативная версия, один файл заменяет все насыщенности. Иногда это легче, иногда тяжелее трёх отдельных файлов — сравните размер.
• Предзагрузка главного шрифта. Строка <link rel="preload"> для файла, которым набран заголовок первого экрана.

Как измерить, сколько сайт теряет на шрифтах и других файлах, — в статье скорость загрузки сайта.

Условный пример: два шрифта, девять начертаний

Пример условный, цифры ориентировочные. Сайт студии ремонта, дизайнер выбрал Montserrat для заголовков и Open Sans для текста. Подключены все насыщенности обоих шрифтов с курсивами через Google Fonts — 18 файлов.

Что видно при проверке:

Допустим, после замены первый экран на мобильном интернете стал появляться на секунду быстрее, а текст под ценой люди начали дочитывать. Сколько это дало в заявках, зависит от трафика, но сама переделка заняла пару часов.

Чек-лист: шрифты на сайте

1. Не больше двух шрифтов на сайт, не больше трёх начертаний на шрифт.
2. Основной текст — 16–17 px на телефоне и 18–20 px на компьютере.
3. Межстрочный интервал текста — 1,4–1,6.
4. Текст тёмный на светлом фоне или светлый на тёмном, без бледно-серого.
5. В шрифте есть «ё», «₽», «№», кавычки-ёлочки.
6. Лицензия открытая или куплена веб-лицензия на вашу компанию.
7. Файлы в woff2, только кириллица и латиница.
8. Указан font-display: swap и запасные шрифты.
9. Первый экран проверен на реальном телефоне с вашим текстом.

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