← Все статьи

Туториалы

Замените шрифты на любом сайте с помощью CSS

17 мая 2026 · автор JustZix Team

Типографика делает или ломает опыт чтения. Если сайт навязывает тонкий низкоконтрастный шрифт, вы можете его переопределить. Одно CSS-правило JustZix меняет каждый шрифт на странице на тот, который вам действительно по душе.

Принудите системный шрифт везде

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

*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

Универсальный селектор тут намеренный. Сайты применяют шрифты к десяткам элементов, и попытка поймать каждый по отдельности — проигрышная игра. Переопределите всё, затем сделайте исключения.

Оставьте код моноширинным

После сплошного переопределения выше блоки кода теряют моноширинный шрифт. Восстановите его, чтобы сниппеты оставались выровненными.

code, pre, kbd, samp, tt,
.hljs, [class*="language-"] {
  font-family: "JetBrains Mono", "Fira Code",
    Consolas, "SF Mono", Menlo, monospace !important;
}

Используйте собственный веб-шрифт

Хотите что-то более выразительное? Подтяните шрифт через @font-face с CDN, затем примените его. Этот код загружает Inter — чистый и хорошо читаемый шрифт без засечек.

@font-face {
  font-family: "Inter Web";
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
body, p, div, span, li, a, h1, h2, h3, h4 {
  font-family: "Inter Web", sans-serif !important;
}

Поскольку JustZix вставляет этот CSS в страницу, правило @font-face работает так же, как если бы его написал автор сайта. Выберите любой URL WOFF2, которому доверяете.

Заодно улучшите читаемость

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

body {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

Вариант для дислексии

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

* {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}

На что обратить внимание

• Всегда заново объявляйте моноширинный для кода, иначе сниппеты съедут.
• Используйте font-display: swap, чтобы текст никогда не исчезал, пока загружается веб-шрифт.
• Проверяйте шрифты иконок — некоторые сайты отрисовывают иконки через семейство шрифтов, и сплошное правило может их скрыть. Исключите их селекторы.
• Держите один стек шрифтов сохранённым, чтобы переиспользовать его в каждом правиле.

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