I am using the Web Font Loader to manage the loading of fonts in my code. But I'm finding that, even when I specify a bold weight for a particular font, the loader is only loading the normal weight in advance, and only subsequently loading the bold variant.
In the html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
In the javascript:
var WebFontConfig = {
"timeout": 3000,
"classes": false,
"custom": {
"families": [
"TeX Gyre Adventor:700n"
],
"urls": [
"./css/fontstuff.css"
]
},
active: function () {
setTimeout(function() {
nowDoOtherStuff();
}, 2500);
}
};
WebFont.load(WebFontConfig);
In fontstuff.css:
@font-face {
font-family: 'TeX Gyre Adventor';
font-style: normal;
font-weight: 400;
src: url('../fonts/TexGyre/texgyreadventor-regular-webfont.woff2') format('woff2'),
url('../fonts/TexGyre/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/TexGyre/texgyreadventor-regular.otf') format('opentype');
}
@font-face {
font-family: 'TeX Gyre Adventor';
font-style: normal;
font-weight: 700;
src: url('../fonts/TexGyre/texgyreadventor-bold-webfont.woff2') format('woff2'),
url('../fonts/TexGyre/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/TexGyre/texgyreadventor-bold.otf') format('opentype');
}
So I am triggering my main function nowDoOtherStuff() off the active event hook, so according to my understanding by this point all the requested fonts should be available and ready... that's the point of Web Font Loader?
I put a delay of 2500ms so that it's clear in the Network tab what resources have actually been fetched when the active event fires, and what I see is:
Firstly, I'm not even requesting texgyreadventor-regular-webfont.woff2 so why is it being fetched at all?
Secondly, and most importantly, why is texgyreadventor-bold-webfont.woff2 (i.e. the font I requested) not actually fetched and ready when the active event fires? It's clear from the waterfall timing (and the artificial 2500ms delay) that the bold variant is only fetched after the active fires.
Why is Web Font Loader prioritizing the fetching of a font I didn't even ask for, and not fetching the font I actually want? This is causing issues with how the subsequent code lays out the content.
BTW this issue is solved by using a preload (which I have only more recently discovered) in the <head> as follows:
<link rel="preload" href="./fonts/TexGyre/texgyreadventor-bold-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
However, I would like to get the Web Font Loader approach working, without having to use preload... I thought that the Web Font Loader was already meant to be implementing a preload functionality?