Режим отображения шрифтов

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

Стандартный режим auto скрывает отображения текста до 3 секунд, ожидая загрузки файла. Если файл не успел загрузиться, то текст отображается, используя запасной шрифт. Если указать режим swap, то текст на странице отобразится сразу с использованием запасного шрифта. Но в момент загрузки файла шрифта пользователи увидят смену стиля текста. В этот момент текст «дёрнется» и это будет восприниматься как «глюк».

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

По этим 2 причинам используйте режим auto.

Есть ещё одна веская причина скрывать текст в первые 3 секунды загрузки. В этот момент CSS файлы, формирующие базовый каркас страницы, ещё не загрузились и блоки на ней представляют «кашу». Если сразу показать текст, то пользователь в первые мгновенья загрузки страницы увидит нагромождение блоков и слипшиеся строки. Это негативно скажется на общем впечатлении.

Стратегия загрузки auto позволяет уберечь пользователя от созерцания «глюка» при загрузке шрифтов и «каши» из блоков текста.

Подробная статья с примерами кода доступна здесь. Официальная документация здесь.

Демонстрация работы разных режимов отображения текста:

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

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('./wrong.php?font=1772914917.6361') 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;
                display: inline-block;
                margin-bottom: 5px;
                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 active" href="./wrong.php">font-display: swap</a> <a class="btn " href="./wrong.php?mode=auto">font-display: auto</a>
        <h2>Файл шрифта загружается через 1 секуну. При font-display равном swap текст отобразится сразу и вы увидете шрифт по умолчанию. В режиме auto текст будет скрыт, ожидая загрузки файла.</h2>
    </body>
</html>

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

Подробнее о тарифах