Font display mode

When connecting custom font files on the site, you can set a strategy for displaying text on the page.

The standard auto mode hides the text display for up to 3 seconds while waiting for the file to load. If the file did not have time to load, then the text is displayed using a spare font. If you specify the swap mode, the text on the page will be displayed immediately using the replacement font. But at the time of downloading the font file, users will see a change in the text style. At this point, the text will “twitch” and it will be perceived as a “glitch”.

Also, after the download of each font file is complete, the user’s browser will “recalculate” the size and location of the blocks on the page, as the height and width of the letters change. This requires additional calculations on the user’s computer or phone, which slows down the loading of the page.

For these 2 reasons, use auto mode.

There is another good reason to hide the text in the first 3 seconds of loading. At this point, the CSS files that form the basic framework of the page have not yet loaded and the blocks on it represent “porridge”. If you show the text right away, the user will see a pile of blocks and stuck lines in the first moments of loading the page. This will negatively affect the overall impression.

The auto loading strategy allows you to save the user from contemplating a “glitch” when loading fonts and “porridge” from text blocks.

A detailed article with code examples is available [here](https://webformyself.com/css-font-display-budushhee-rendera-shriftov-v-vebe /). Official documentation here.

Demonstration of the operation of different text display modes:

Demonstration

HTML code

Open a demo Download the example code

<!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=1770054950.3081') 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 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>

Lessons

Font display mode

PRO subscription for working with the service