Specifying default fonts

Most sites use custom fonts. But it takes some time from the moment the page is opened to the font files are loaded. Depending on the value font-display and file upload time there are 2 possible options:

The browser hides the text from the user’s eyes and shows it only when the custom font file has loaded.
The browser shows the text with the default font. Then the custom font file is loaded and the text style changes.

It is necessary to avoid abrupt font changes in the second scenario. When the default font has serifs, and the custom font without them, there will be a sharp change in the appearance of the page. This will distract the visitor from the process of exploring the site.

Choose a platform-independent default font in the same family as your custom ones. Ready-made kits are here.

There are 2 ways to specify fonts:

In the <body> tag of the HTML code of the page, specify the fonts in the style attribute like this <body style="font-family: Tahoma, Verdana, sans-serif">.
Add CSS code for the body tag to the HTML code of the page like this body { font-family: Tahoma, Verdana, sans-serif }

An example of an abrupt change in font style if the default font is different in style from the user:

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('./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>

Lessons

Specifying default fonts

PRO subscription for working with the service