How do browsers handle multiple font-faces, when their source is the same?

Question

I know that using multiple different fonts with font-face has a considerable performance implication if the website is already resource extensive, particularly on mobile (although less so, now that all phones are basically mini computers).

In this case, I am talking about a web-app so this is not a normal website so the performance is very important.

Basically, I am thinking about naming my fonts as "header-stats" "header-quote" and so on, having a font face for every meaningful section.

@font-face {
    font-family: "section1";
    src: url("/dist/fonts/example.woff");
}
@font-face {
    font-family: "section2";
    src: url("/dist/fonts/example.woff");
}

I have 2 sections with the same font, just naming them differently so it's easier to edit and reason about later, because I might want to change the fonts of that section later. Note that this is not a huge problem in the age of sass and alike, all my css files are grouped in different folders/files anyway, but it will be nice if it's possible to do this. I can do this with variables easily and that's cleaner, just wondering about this case specially. Please don't suggest alternatives.

Does anyone have any information on how this impacts browser performance? Is it the same as 2 different fonts or do most major browsers account for this?

Answer 1

Possible solution:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

The order is important, the bold/italic style must come last.

Performance

I am not really sure but following this you can have an approximation:

Browser requests HTML documen
Browser begins parsing HTML response and constructing the DOM
Browser discovers CSS, JS and other resources and dispatches requests
Browser constructs the CSSOM once all CSS content is received and
combines it with the DOM tree to construct the render tree
Font requests are dispatched once render tree indicates which font variants are needed to render the specified text on the page
Browser performs layout and paints content to the screen
If the font is not yet available the browser may not render any text pixels
Once the font is available the browser paints text pixels

Recommendation

The browser will handle the fonts but it will still make 2 http requests, while the list-style-type is handled in different way.
Also if you are using the same font you don't have to declare it for different sections just make it default for body and it would apply for all the sections of your website unless you don't put other font-family property containing different font.
And last but not least use google fonts, and never ever localy stored fonts.