2

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?

  • I'd assume (though this is based on speculation) the browser would handle the font as any other external resource. If you for example create a page with multiple instances of the same image eg. as CSS list-style-image, you will see the image being downloaded only once in the Network tab of your browsers debug console. I'd believe this is not different for fonts. But since it is speculation I post this as a comment. – Neograph734 Feb 21 '16 at 13:32
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.