Частые вопросы о шрифтах

Загрузите файлы шрифта на свой сервер, опишите их в CSS с помощью @font-face, а затем укажите название семейства в font-family. На странице каждого шрифта WebFonts можно сформировать и скопировать готовый CSS-код.

Для современных сайтов обычно выбирают WOFF2: он хорошо поддерживается браузерами и эффективно сжимается. WOFF можно оставить как запасной формат для старых браузеров. TTF и OTF чаще используют для установки на компьютер и работы в графических редакторах.

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

Введите украинский текст в поле предпросмотра и проверьте буквы Ґ, Є, І, Ї, а также апостроф и знаки препинания. На WebFonts можно отфильтровать шрифты по языковой поддержке и сразу протестировать свой текст в доступных начертаниях.

Используйте WOFF2, подключайте только нужные начертания и наборы символов, настройте длительное кэширование и font-display. Критический шрифт можно предварительно загрузить через preload, но не стоит preload-ить все файлы.

Веб-шрифт — это файл шрифта, который браузер загружает вместе со страницей. Благодаря этому сайт может показывать выбранную гарнитуру, даже если она не установлена на устройстве пользователя.

Гарнитура — это общий дизайн семейства, например Inter. Шрифт — конкретное начертание этого семейства, например Inter Bold Italic. В повседневной речи слово «шрифт» часто используют для обоих понятий.

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

Это разные уровни насыщенности. Обычно 400 соответствует Regular, 500 — Medium, 600 — Semibold, 700 — Bold, а 900 — Black. Реальный вид зависит от конкретной гарнитуры.

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

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

Проверяйте шрифт на реальном тексте и нужном языке, в малых размерах и на разных экранах. Важны чёткие формы букв, достаточная высота строчных знаков, комфортные интервалы, контраст и умеренная длина строки.