How to set up inheritance fonts when using font-display: swap?

Question

css

Greetings.
The styles are written like this:

body{
    font-family: 'ubuntu400',Arial,sans-serif;
    ...
}

@font-face {
    font-family: "ubuntu400";
    src: url("font/ubuntu400.eot");
    src: url("font/ubuntu400.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu400.woff2") format("woff2"),
        url("font/ubuntu400.woff") format("woff"),
        url("font/ubuntu400.ttf") format("truetype");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ubuntu500";
    src: url("font/ubuntu500.eot");
    src: url("font/ubuntu500.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu500.woff2") format("woff2"),
        url("font/ubuntu500.woff") format("woff"),
        url("font/ubuntu500.ttf") format("truetype");
    font-display: swap;
}

If I add a page title , then when the page is loaded, the title will not be displayed / replaced by an additional system font until the font is loaded and will be displayed with the style built into the browser like this: And logically it should be displayed in Arial font, like this : how it loads): I suspect that this is due to the fact that I did not specify an additional font for the title. Is it true? Tell me. Shouldn't the font be selected from the selectorfont-family: ubuntu500




bodyautomatically? Do any elements for which I prescribe a specific font (ubuntu500) must also prescribe fallback fonts? If so, then there are about 40 places in my file where a specific font is specified for specific elements, and adding a set of fallback fonts to each entry is bloating the file from scratch. What are the options for this case:

1. In any case, specify fallback fonts for each element where a specific font is specified.
   
2. Something other.
   

Answer 1

Везде, где указываете название шрифта, который будет применен, нужно прописывать запасной