How to know which `unicode-range` will be used by the browser for preload a font?

Question

I search to preload a fonts from CSS file.

The Css Files cut the font by unicode-range : It's pretty good, that load only the part of the font I want.

But : I want to preload (before this CSS file) the font will be used by the browser. And I don't know how to know what is the font I should preload ?

ex :

<head>
    <!-- Which font ? a.woof2 / b.woff2 or c.woff2 ? -->
    <link rel="preload" href="fonts/myFont_x.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <!-- other elements -->
    <link rel="stylesheet" href="mystyleFont.css">
</head>

css file (mystyleFont.css) :

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/a.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // That is the unicode-range
}

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/b.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129;
}

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/c.woff2) format('woff2');
  unicode-range: U+0460-052F;
}

In this sample, I want to preload only c.woff2 if the browser use the unicode-range U+0460-052F...

And I don't want to preload all fonts on my page.

Do you have an idea for that ?

Thank you !

Cyrbil · Answer 1 · 2020-12-23T15:20:11.650

As described in the Mozilla documentation:

If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

To be clear, it will still download the whole file when needed. Not just part of it.

Some precisions on unicode-range behavior:

It will change the font only for the characters inside the range, even if the css is applied to a whole element
It only loads the font once a character inside the range appears, and this will reload the style of all elements affected, even if they don't have the character but the style is attached. This will be visible as a blink in the page, the blink duration is the time to fetch the font
Using preload will ensure the page's style reload blink duration is minimal
Using preload must include as= and type= or the font will be re-downloaded

When you say:

I want to preload only c.woff2 if the browser use the unicode-range U+0460-052F...

For browsers that support the attribute (all recent browsers except IE), when at least one character of the range is required to be displayed, the font will be downloaded in full. But preload will happen as the page is loaded, and so the css attributes aren't yet loaded, resulting in a download of all fonts marked as preload. With your current config, if you remove the preload, only the font that are actually used in the page will be fetched.

To extend the answer, you can also reduce the font size by removing glyphs (some examples here). Meaning you could cut your font in pieces and retrieving the relevant part using the css's attribute unicode-range.

Note that if your font is not very large (more than fews Mb), this optimization is overkill and you should focus on other options (caching, http's compression, http2's multiplexing, ...)

How to know which `unicode-range` will be used by the browser for preload a font?

1 Answers1