Бесплатные шрифты — лучшие сайты, превью и как их использовать
Просматривайте надежные источники бесплатных шрифтов, тестируйте предварительный просмотр в реальном времени, копируйте чистый CSS и узнайте, как правильно использовать веб-шрифты. Включены коллекции с открытым исходным кодом, бесплатные для коммерческого использования и для личного использования.
Google Шрифты
ОФЛКрупнейшая библиотека с открытым исходным кодом с быстрой глобальной CDN, подмножествами и переменными шрифтами. Идеально подходит для Интернета и приложений. Большинство семей используют лицензию SIL Open Font License.
Fontshare (от ITF)
БесплатноКачественные шрифты, предлагаемые Indian Type Foundry бесплатно. Чистые семейства, простая встраивание CDN и множество переменных опций.
Шрифт Squirrel
Бесплатная рекламаКураторский каталог, посвященный шрифтам, бесплатным для коммерческого использования. Включает генератор веб-шрифтов для самостоятельного размещения.
Лига подвижного типа
ОФЛКлассическая литейная компания с открытым исходным кодом и вневременными семействами, такими как League Spartan и Raleway. Отлично подходит для брендинга и редакционных статей.
Вельветин
ОФЛЭкспериментальные шрифты с открытым исходным кодом и уникальными стилями отображения. Идеально подходит для плакатов, культуры и творчества.
Коллектив
ОФЛСообщество, выпускающее высококачественные бесплатные шрифты под открытыми лицензиями. Сильные редакционные и демонстрационные возможности.
Открытый литейный цех
ОФЛКураторский указатель шрифтов с открытым исходным кодом, инструментами тестирования и презентацией, ориентированной на дизайн. Идеально подходит для открытия новых семей.
1001 шрифтов
Смешанные лицензииБольшой каталог с фильтрами для бесплатного коммерческого использования. Прочтите лицензию на семью; многие из них предназначены только для личного использования.
ДаФонт
Личное использованиеОгромный архив лучшего всего для личных проектов и вдохновения. Лицензии сильно различаются; проверьте каждую страницу загрузки.
Иконочные шрифты (Font Awesome, значки материалов, значок Remix)
Бесплатные уровниДля значков пользовательского интерфейса используется конвейер шрифтов. Рассмотрим современные системы значков SVG, но шрифты значков по-прежнему полезны для быстрого добавления.
Предварительный просмотр в реальном времени и фрагменты CSS
Только локально — ничего не загруженоСравнение функций (снимок)
Лицензии различаются в зависимости от семьи| Сайт | Открытый исходный код | Бесплатная реклама | Переменные шрифты | CDN/Веб-шрифты | Примечания |
|---|---|---|---|---|---|
| Google Шрифты | Да | Да* | Да | Да | Самая большая библиотека, быстрый CDN |
| Fontshare | Смешанный | Да | Много | Да | Современные семьи |
| Шрифт Squirrel | Смешанный | Да* | Некоторый | Генератор | Создано для коммерческого использования |
| Лига подвижного типа | Да | Да | Некоторый | Самостоятельный хостинг | Вечная классика |
| Вельветин | Да | Да | Некоторый | Самостоятельный хостинг | Экспериментальный показ |
| ДаФонт | Нет | Варьируется | Немного | Нет | Отлично подходит для личных проектов |
Как использовать бесплатные шрифты в Интернете
- Проверьте лицензию: OFL и другие разрешительные лицензии лучше всего подходят для коммерческих проектов. На некоторых сайтах указаны шрифты, предназначенные только для личного использования.
- Выберите доставку: ссылка CDN для скорости или самостоятельный хостинг с @font-face для контроля и конфиденциальности.
- Предварительно загрузите важные шрифты для главного текста, если CLS вызывает беспокойство; определить резервные стеки, чтобы избежать вспышек.
- Предпочитайте переменные шрифты, если они доступны, чтобы уменьшить количество запросов и получить гибкую насыщенность.
Пример CDN
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style> Пример самостоятельного хостинга
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } * Всегда проверяйте лицензию каждой семьи на исходном сайте.
Часто задаваемые вопросы
Бесплатны ли Google Fonts для коммерческого использования?
Большинство из них выпущены на условиях OFL и бесплатны для коммерческого использования. Подтвердите лицензию на каждой семейной странице.
Должен ли я использовать иконочные шрифты или значки SVG?
Значки SVG более гибки для современных приложений. Шрифты значков остаются полезными для быстрой настройки или устаревших конвейеров.
Влияют ли веб-шрифты на скорость сайта?
Да. Использовать шрифт-дисплей: поменять местами, подмножество, где это возможно, и ограничьте семейства и веса.
Какой универсальный шрифт лучше?
Inter, Roboto и Source Sans 3 универсальны. Для заголовков используйте засечки, такие как Merriweather или Playfair.