question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
TrueXakePcommented, Mar 11, 2020

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

1reaction
TrueXakePcommented, Mar 9, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

font-weight is not working properly? - Stack Overflow
Save this answer. Show activity on this post. Its because the font size (9px) is too small to display bold. Try 11px or...
Read more >
A New Way To Reduce Font Loading Impact: CSS Font ...
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that.
Read more >
Best practices for fonts - web.dev
Be cautious when using preload to load fonts #​​ Inlining font declarations and adjusting stylesheets may be a more effective approach. These ...
Read more >
font-weight - CSS: Cascading Style Sheets - MDN Web Docs
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently ...
Read more >
Styling type on the web with variable fonts - Google Fonts
Whether loading variable fonts from a font delivery service or our own server, the actual styling of them via CSS is the same...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found