The 'medium' is an incorrect font-weight and fonts with it doesn't preloaded
See original GitHub issueFirst sorry for my english.
I have a font ‘Merel’. I use it in my web-app in two weights 500 and 300.
With PreloadJS 1.0.0 this JS code:
var fldr = new createjs.FontLoader({
src: [
"/fonts/merel/Merel-Medium.woff2",
"/fonts/merel/Merel-Light.woff2"
],
type "font"
}, true);
fldr.load();
produces this CSS:
@font-face {
font-family: 'Merel';
font-style: normal;
font-weight: 300;
src: local('Merel Light'), url('/fonts/merel/Merel-Light.woff2') format('woff2');
}
@font-face {
font-family: 'Merel';
font-style: normal;
font-weight: medium;
src: local('Merel Medium'), url('/fonts/merel/Merel-Medium.woff2') format('woff2');
}
But regarding to MDN the medium
is an incorrect value for the font-weight
property. And I see in the console of my Chromium 64.0.3254.0
and Firefox Nightly 59.0a1
that Merel-Medium is loaded only after I make a visible element that uses it. And also I see that “Flash Of Unstyled Text” in that moment.
This is also happened when I specify ‘medium’ as a weight in a css or object definition.
{
src: [ {
src: "url(/fonts/merel/Merel-Medium.woff2) format('woff2')",
family: "Merel",
weight: "medium",
style: "normal"
}, /*....*/ ],
type: "font"
}
When I specify font-weight as the ‘500’ then the font preloads correct. But in that case I can not use short array definition as a list of files.
The MDN says that correct font weights are: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Also the PHPStorm tells me that ‘medium’ is invalid value for the ‘font-weight’ property when I try to use it in my styles.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:9 (1 by maintainers)
Top GitHub Comments
Hi @elussich! I appreciate your contribution. I didn’t have time to dig into this before. Now I see that only “Medium” was missing. I think that the names of the weights that are the correct values of ‘font-weight’ property can be kept as-is (as words). So let me take back what I said in https://github.com/CreateJS/PreloadJS/issues/246#issuecomment-596840028
And I can confirm that the #270 did the job.