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 !
1 answers
solution1
1 2020-12-23 12:59:33
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
preloadwill ensure the page's style reload blink duration is minimal - Using
preloadmust includeas=andtype=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, ...)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.