Нужен шрифт для лендинга, блога или интернет-магазина, но непонятно, где взять файлы, можно ли использовать их коммерчески и что потом писать в CSS? Самый простой путь — искать веб-шрифты в Google Fonts, Font Squirrel, FontSpace или на официальных сайтах авторов. Но скачать файл — только половина дела: ещё нужно проверить лицензию, наличие кириллицы и выбрать нормальный формат для веба.
Сразу оговорюсь: я бы не начинал с архивов в духе «1000 лучших шрифтов бесплатно». Для сайта количество вообще не главное. Куда важнее три вещи: понятная лицензия, нужный набор символов и подходящий web-формат. Один хороший шрифт с двумя нужными начертаниями обычно полезнее папки из сотни файлов, половину происхождения которых потом невозможно установить.
Если нужен быстрый рабочий вариант, проще начать с Google Fonts и подключить семейство через HTML. Если нужен полный контроль над загрузкой ресурсов, шрифт можно хранить локально на своём сервере и подключать через @font-face. Ниже разберём оба варианта.
Где скачать бесплатные шрифты для сайта
Искать бесплатные шрифты для сайта лучше в каталогах, где указаны автор, лицензия и условия использования. Случайный архив из поисковой выдачи вполне может содержать рабочий TTF, но сам файл ничего не говорит о том, имеете ли вы право разместить его на коммерческом сайте.
| Источник | Что можно найти | Коммерческое использование | Кириллица | Для сайта |
|---|---|---|---|---|
| Google Fonts | Большой каталог веб-шрифтов | По лицензии конкретного семейства | У многих семейств | Да |
| Font Squirrel | Бесплатные гарнитуры | Нужно проверять лицензию | Зависит от семейства | У многих шрифтов |
| FontSpace | Personal и commercial-use варианты | Смотреть карточку шрифта | Зависит от семейства | Проверять условия |
| DaFont | Бесплатные, demo и другие варианты | Зависит от автора | Зависит от шрифта | Не каждый файл предназначен для web |
| Сайт автора или студии | Оригинальные файлы семейства | По условиям автора | Зависит от семейства | По условиям web-лицензии |
Для большинства обычных проектов я бы первым делом открыл Google Fonts. Не потому, что там обязательно находятся «самые красивые шрифты в интернете», а потому, что сервис удобен именно для веба: можно посмотреть семейство, проверить нужные начертания и сразу перейти к подключению.
Font Squirrel пригодится, если хочется выйти за рамки самых привычных Google Fonts. Но здесь, как и в любом стороннем каталоге, я бы всё равно отдельно смотрел условия использования конкретной гарнитуры.
Главное правило: выбирайте источник не по размеру кнопки Download, а по тому, насколько легко установить автора и условия лицензии.
Google Fonts: бесплатные шрифты для сайта
Google Fonts — один из самых простых способов добавить веб-шрифт без поиска неизвестных архивов на сторонних сайтах. Вы выбираете семейство и нужные начертания, после чего можете подключить его как внешний ресурс. При необходимости файлы можно размещать самостоятельно, если лицензия выбранного семейства это позволяет.
Для первого сайта такой вариант особенно удобен: не приходится вручную разбираться с десятком исходных файлов и гадать, какой из них нужен браузеру.
Но здесь есть маленькая ловушка: красивый английский preview ещё не означает, что шрифт подходит для русскоязычного сайта. Обязательно проверяйте кириллицу — буквы, цифры, кавычки, длинное тире, символ ₽ и другие знаки, которые реально будут встречаться в интерфейсе и статьях.
Как выбрать красивые Google Fonts для сайта
«Красивый шрифт» — слишком субъективный критерий. Гарнитура, которая эффектно выглядит в огромном H1, может оказаться совершенно неудобной в статье на несколько тысяч символов.
- Для основного текста лучше выбирать спокойный и хорошо читаемый шрифт с полноценной кириллицей.
- Для интерфейса проверяйте цифры, короткие подписи, кнопки и текст небольшого размера.
- Для заголовков можно взять более характерную гарнитуру, если она не мешает чтению.
- Для русскоязычного проекта тестируйте реальный русский текст, а не только латинскую демонстрационную фразу.
Я бы вообще проверял шрифт на том контенте, для которого он предназначен: вставил настоящий H1, пару абзацев, цену, кнопку — и сразу становится понятно гораздо больше, чем по красивой карточке в каталоге.
Если хочется глубже разобраться не только в выборе гарнитуры, но и в размерах, интервалах, контрасте и сочетании шрифтов, у нас есть отдельный материал про типографику в веб-дизайне.
Какие форматы шрифтов нужны для сайта
В скачанном архиве могут находиться WOFF2, WOFF, TTF и OTF. Это разные форматы файлов, и загружать на сервер всё содержимое архива обычно не нужно.
| Формат | Где используется | Что делать на практике |
|---|---|---|
| WOFF2 | Современные веб-сайты | Основной вариант для доставки шрифта через веб |
| WOFF | Веб и более старые сценарии совместимости | Добавлять только при реальной необходимости |
| TTF | Desktop и другие цифровые сценарии | Не выбирать автоматически вместо готового WOFF2 |
| OTF | Desktop, дизайн и типографика | Проверить наличие web-версии |
Для современного сайта я бы в первую очередь смотрел на WOFF2. Этот формат хорошо сжимается и предназначен для доставки шрифтов через веб. Если в архиве лежит одновременно WOFF2 и TTF одного начертания, обычно нет смысла заставлять пользователя скачивать более тяжёлый вариант без причины.
Отдельная история — начертания. Regular 400, Medium 500, Bold 700 и Italic могут лежать в разных файлах. Если дизайн использует только обычный и жирный текст, не нужно загружать остальные веса «на будущее». Каждый такой файл потом загружается не для красоты папки, а по сети.
Как подключить скачанный шрифт к сайту через CSS
После скачивания web-font обычно помещают в директорию проекта, например /fonts/. Затем в CSS создают правило @font-face, которое сообщает браузеру название семейства, адрес файла, начертание и вес.
Допустим, в проекте находятся два файла:
/fonts/site-font-regular.woff2— Regular 400;/fonts/site-font-bold.woff2— Bold 700.
Подключение будет выглядеть так:
@font-face {
font-family: "SiteFont";
src: url("/fonts/site-font-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SiteFont";
src: url("/fonts/site-font-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: "SiteFont", Arial, sans-serif;
}После объявления @font-face имя SiteFont используется как обычное значение font-family. После кастомного семейства стоит указывать резервный шрифт — он понадобится, если основной файл ещё не загрузился или по какой-то причине недоступен.
Для каждого реального начертания желательно задавать соответствующий font-weight. Если подключить только Regular 400, а потом написать font-weight: 700, браузеру в некоторых случаях придётся визуально имитировать жирное начертание вместо использования специально нарисованного Bold.
Поэтому запросы «шрифты для сайта HTML» и «CSS шрифты для сайта» на практике относятся к одной задаче: HTML создаёт структуру страницы, а подключение и оформление шрифтов в основном выполняется средствами CSS. Если эта граница пока не совсем понятна, её подробнее разбираем в руководстве по HTML и CSS.
Как подключить Google Fonts через HTML и CSS
Если шрифт используется через Google Fonts как внешний веб-ресурс, скачивать WOFF2 вручную необязательно. Сервис формирует ссылку на таблицу стилей, которую добавляют в секцию <head> HTML-документа.
Общая схема выглядит так:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="URL_ИЗ_GOOGLE_FONTS" rel="stylesheet">
</head>После этого выбранное семейство назначают элементам через CSS:
body {
font-family: "Название шрифта", sans-serif;
}Точный URL и название семейства лучше брать непосредственно из Google Fonts для выбранного шрифта и нужных начертаний. Копировать ссылку из случайного примера не стоит: другой проект может использовать совсем другой набор весов.
Когда этот способ удобен: если хочется быстро подключить популярный шрифт без самостоятельного управления файлами. Локальное размещение полезно, когда проекту нужен больший контроль над внешними зависимостями и загрузкой ресурсов.
Можно ли использовать скачанные шрифты бесплатно
Вот здесь чаще всего и возникает путаница: «можно бесплатно скачать» и «можно бесплатно использовать на коммерческом сайте» — не одно и то же.
Шрифт может распространяться бесплатно для личных проектов, но требовать другую лицензию для бизнеса, приложения или размещения файлов непосредственно на веб-сервере.
| Обозначение | Что обычно означает | Что делать |
|---|---|---|
| Personal Use | Личное некоммерческое использование | Не переносить автоматически на коммерческий сайт |
| Commercial Use | Разрешён определённый тип коммерческого использования | Проверить ограничения конкретной лицензии |
| Webfont / Web Use | Предусмотрены условия использования на сайте | Проверить право хранить и отдавать файл через веб |
| Open-source | Шрифт распространяется по открытой лицензии | Прочитать условия именно этой лицензии |
Особенно внимательно смотрите на пометку Free for personal use. Для сайта компании, интернет-магазина, платного сервиса или другого коммерческого проекта такой лицензии может быть недостаточно.
Да, читать лицензию шрифта — самая скучная часть всего процесса. Но лучше потратить на неё две минуты до публикации, чем уже после запуска выяснять, откуда взялся файл и разрешено ли вообще держать его на сервере.
Если на странице нет понятных условий, ищите официальный сайт автора или файл лицензии внутри архива. Если происхождение шрифта установить невозможно, я бы просто выбрал альтернативу с прозрачными условиями.
Как выбрать шрифт для сайта
Когда источник и лицензия проверены, остаётся понять, подходит ли сам шрифт. Для веба одного «мне нравится, как он выглядит» недостаточно.
- Кириллица. Проверьте русские и украинские буквы, цифры, кавычки, тире, валютные символы и остальные нужные знаки.
- Читаемость. Посмотрите не только заголовок, но и несколько нормальных абзацев текста.
- Начертания. Заранее решите, действительно ли нужны Regular, Medium, Bold и Italic.
- Размер файлов. Каждый дополнительный web-font увеличивает объём загружаемых ресурсов.
- Мобильная версия. Обязательно посмотрите на текст на небольшом экране.
- Лицензия. Проверяйте её до публикации, а не когда дизайн уже утверждён.
Для большинства сайтов я бы начал с одного семейства и двух-трёх действительно используемых начертаний. Второй декоративный шрифт имеет смысл добавлять, только если у него есть конкретная задача — например, фирменные заголовки или отдельные акценты.
Это тот случай, когда «побольше вариантов» совсем не обязательно означает «получше дизайн».
FAQ о скачивании и подключении шрифтов
Где скачать бесплатные шрифты для сайта?
Начать можно с Google Fonts, Font Squirrel и FontSpace. Для каждого конкретного шрифта проверяйте лицензию, поддержку кириллицы и возможность использования в качестве web-font.
Какие шрифты можно использовать на сайте бесплатно?
Те, чья лицензия разрешает нужный тип использования. Одной надписи «Free Download» недостаточно: для коммерческого проекта нужно проверить условия коммерческого и веб-использования.
Как загрузить свой шрифт на сайт?
Поместите подготовленный файл, обычно WOFF2, в директорию проекта и объявите его через @font-face. После этого назначьте созданное семейство элементам через свойство font-family.
Как подключить шрифт через CSS?
Используйте @font-face, укажите путь к файлу в src, задайте font-weight и font-style, а затем используйте название семейства в font-family.
Какой формат шрифта лучше для сайта?
Для большинства современных сайтов основным вариантом будет WOFF2. Он предназначен для эффективной доставки веб-шрифтов и хорошо поддерживается современными браузерами.
Можно ли скачать шрифт из Google Fonts?
Да, семейства Google Fonts можно использовать не только через внешнее CSS-подключение. Если планируется локальное размещение, сохраните информацию о лицензии конкретного семейства и подключайте только необходимые файлы и начертания.
Что лучше: Google Fonts или локальное подключение?
Google Fonts проще для быстрого старта. Локальные файлы дают больше контроля над ресурсами и внешними зависимостями. Универсально правильного варианта здесь нет — выбор зависит от требований конкретного проекта.
В итоге схема довольно простая: найти шрифт в нормальном источнике, проверить лицензию и кириллицу, выбрать только необходимые начертания и корректно подключить семейство через CSS. Если шрифт хранится локально, для современного сайта обычно достаточно WOFF2. И я бы точно не усложнял эту задачу без причины: хороший шрифт должен помогать читать сайт, а не превращать подключение типографики в отдельный проект.
Источники: MDN Web Docs, Google for Developers.