[@font-face:unicode-range] Preload a specific font by unicode-range #13750
Description
Discussed in https://github.com/w3c/csswg-drafts/discussions/5820
(moving out of the discussions)
Originally posted by DocRoms December 22, 2020
Hi !
I discover the unicode-range descriptor in CSS (https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-fonts-3/#unicode-range-desc) , and, I search a mean to preload only the Font will be used by the browser :
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://un5mkq9urycyna8.julianrbryant.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://un5mkq9urycyna8.julianrbryant.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://un5mkq9urycyna8.julianrbryant.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 !