CODEWITHSUNDEEP
csswebfonts
Sathik Basha
Sathik Basha

Reputation: 146

Pre-loading fonts

Do i need to use both rel="preload" and font-display="swap". Since rel="preload" prefetches the required font, is it necessary to add font-display attribute too?

<link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Magra&display=swap" as="font">

Upvotes: 0

Views: 149

Answers (1)

abgregs
abgregs

Reputation: 1380

It depends on the intended result.

With font-display: swap, text is immediately rendered using the fallback typeface specified in your font stack while the request is made for your font. The fallback is whatever system font comes next in your font stack as listed in your font-family property.

Once the font is downloaded, it will be swapped in for the fallback.

This is just one option and you don't need to use it. For example, the immediate rendering of text when using font-display: swap creates a flash of unstyled text (FOUT) for the user and possible shifts in layout when the fonts swap, which can be undesirable.

You could opt for font-display: fallback, which attempts to account for this by hiding any text on screen for the first 100ms, optimistically hoping that your font downloads in that time frame.

If your font downloads within the first 100ms, it gets applied to the first visible text shown to the user (no FOUT).

If not, at 100ms the text gets rendered with the fallback typeface and the same pattern as font-display: swap resumes with your font getting swapped in once it eventually downloads.

Upvotes: 1

Related Questions