Указание шрифтов по умолчанию

Большинство сайтов используют пользовательские шрифты. Но от момента открытия страницы до загрузки файлов шрифтов проходит какое-то время. В зависимости от значения font-display и времени загрузки файла возможны 2 варианта:

Браузер скрывает текст от глаз пользователя и показывает только тогда, когда файл пользовательского шрифта загрузился.
Браузер показывает текст со шрифтом по умолчанию. Затем подгружается файл пользовательского шрифта и стиль текста меняется.

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

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

Указать шрифты можно 2 способами:

В теге <body> HTML кода страницы указать шрифты в аттрибуте style вот так <body style="font-family: Tahoma, Verdana, sans-serif">.
В код HTML страницы добавить CSS код для тега body вот так body { font-family: Tahoma, Verdana, sans-serif }

Пример резкой смены стилистики шрифта, если шрифт по умолчанию отличается по стилистике от пользовательского:

Демонстрация

HTML код

Открыть демонстрацию Скачать код примера

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @font-face {
                font-family: 'roboto-regular';
                font-style: normal;
                font-weight: 400;
                src: url('./missed.php?font=1770055030.2378') format('woff2');
                unicode-range: U+21-23,U+25-5F,U+61-7E,U+AB,U+BB,U+401,U+410-44F,U+451,U+2013-2014,U+2018-2019,U+201C,U+201C-201E,U+2026,U+20BD;
                font-display: swap;
            }
            body {
                font-family: 'roboto-regular';
            }
            .btn {
                color: #000;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <a class="btn" href="./missed.php">Обновить страницу</a>
        <h2>Этот текст сначала отображается шрифтом по умолчанию с засечками. Затем через 3 секунды загрузится файл шрифта без засечек и дизайн страницы резко изменится.</h2>
    </body>
</html>

ПРО подписка для работы с сервисом

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса