The 'medium' is an incorrect font-weight and fonts with it doesn't preloaded

[TrueXakeP]

First 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.

[TrueXakeP]

I just discovered that as a workaround I can just rename the file Merel-Medium.woff2 to Merel-500.woff2 but in that case a 'Merel 500' will be required first as a local font.

@font-face {
    font-family: 'Merel';
    font-style: normal;
    font-weight: 500;
    src: local('Merel 500'), url('/fonts/merel/Merel-500.woff2') format('woff2');
}

[wdamien]

Glad you found a solution! This does sound more like a browser related issue. PreloadJS just downloads the file, its up to the browser to use & render it.

[elussich]

Hello!

I want to revive this issue. I bumped into the same behavior and I found the issue lies in the absence of the "medium" name into the font weight map for the FontLoader class.

I have created a PR #270 that fix this issue. Please review at your soonest.
Thanks!

cc @wdamien @TrueXakeP

[TrueXakeP]

Sorry about the late response.

I don't think that's a browser problem. I see the problem with the css produced by PreloadJS.
PreloadJS produced the 'medium' value for the 'font-weight' property from the file name of my font, while in the case of 'light' it did the right thing. But again: According to the CSS specification 'medium' is an invalid value for the property `font-weight', it's only a semantic designation, so browsers have nothing to do with it (see: https://www.w3.org/TR/css-fonts-3/#font-weight-prop).

In the case of 'Merel', 'Medium' is a part of the font name, rather then weight. And local('Merel Medium') will load a local font because the font with this name exists and can be installed on the user's system, but not local('Merel 500') because there is no such font. And that's the problem with my workaround. Because the Merel font with the right weight is called 'Merel Medim', not 'Merel 500'.

[TrueXakeP]

And I can confirm that the #270 did the job.

[TrueXakeP]

I also recommend adding other missing names from the specification to the dictionary:
https://www.w3.org/TR/css-fonts-3/#font-weight-prop

Values have the following meanings:

100 to 900
These values form an ordered sequence, where each number indicates a weight that is at least as > dark as its predecessor. These roughly correspond to the commonly used weight names below:

• 100 - Thin
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Normal
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

[elussich]

Hi @TrueXakeP! Thanks for your valuable input.

It seemed that most of the definitions were already there but I added "normal" and "bold" anyway, for the sake of completeness. Let me know your thoughts.

Hopefully, CreateJS authors will be ok to incorporate this.
Thanks!

[TrueXakeP]

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 #246 (comment)

[TrueXakeP]

I think that the names of the weights that are the correct values of 'font-weight' property can be kept as-is.

By that, I mean, they don't even have to be on the list.

I also hope that your PR will be accepted soon. I have no power over this.