Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
TrueXakeP opened this issue Nov 23, 2017 · 9 comments · May be fixed by #270
Closed

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

TrueXakeP opened this issue Nov 23, 2017 · 9 comments · May be fixed by #270

Comments

@TrueXakeP
Copy link

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
Copy link
Author

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
Copy link
Member

wdamien commented Dec 5, 2017

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.

@wdamien wdamien closed this as completed Dec 5, 2017
@elussich elussich mentioned this issue Mar 9, 2020
Open
@elussich
Copy link

elussich commented Mar 9, 2020

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
Copy link
Author

TrueXakeP commented Mar 9, 2020 •
edited
Loading

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
Copy link
Author

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

@TrueXakeP
Copy link
Author

TrueXakeP commented Mar 10, 2020 •
edited
Loading

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
Copy link

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
Copy link
Author

TrueXakeP commented Mar 10, 2020 •
edited
Loading

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
Copy link
Author

TrueXakeP commented Mar 10, 2020 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add "medium" to weights lookup. elussich/PreloadJS
3 participants
@elussich @wdamien @TrueXakeP