FontLoader only loads one font size

[Blama]

Hi Isomorphic,

I just noticed that the framework does preload fonts listed in load_skin.js like this:

    // if CSS is loaded or being loaded, call FontLoader with same @font-face fonts from CSS
    if (cssLoaded != null) isc.FontLoader.loadCustomFonts([
        "Dosis", "FontAwesome" // Changed
    ], cssLoaded);

But it seems that it does not load all font-weights defined in skin_styles.css. This is my definition:

@font-face {
font-family: "FontAwesome";
[B]font-weight: normal;[/B]
font-style : normal;
       src : url("font/fa-regular-400.eot?v=5.0.4");
       src : url("font/fa-regular-400.eot?#iefix&v=5.0.4") format("embedded-opentype"),
             url("font/fa-regular-400.woff?v=5.0.4") format("woff"),
             url("font/fa-regular-400.ttf?v=5.0.4") format("truetype"),
             url("font/fa-regular-400.svg?v=5.0.4#fontawesomeregular") format("svg");
}

@font-face {
font-family: "FontAwesome";
[B]font-weight: bold;[/B]
font-style : normal;
       src : url("font/fa-solid-900.eot?v=5.0.4");
       src : url("font/fa-solid-900.eot?#iefix&v=5.0.4") format("embedded-opentype"),
             url("font/fa-solid-900.woff?v=5.0.4") format("woff"),
             url("font/fa-solid-900.ttf?v=5.0.4") format("truetype"),
             url("font/fa-solid-900.svg?v=5.0.4#fontawesomeregular") format("svg");
}

On load, it fetches only the -400 file, the -900 is loaded when the font is needed the first time. Is there some way to have all font-weights loaded at start?
This is minor for me, as it is working nevertheless.

Best regards
Blama

[Isomorphic]

The FontLoader has a few different modes of operation as discussed in the docs here. If you're using Chrome, it's probably defaulting to the "canvas measurement" approach, which doesn't currently support loading multiple fonts per family. However, the CSS Font API approach may be to load them all. As the docs mention, to force this mode on you'll need to set window.isc_useCSSFontAPI = true before the Framework JS is loaded. (You could also try using Firefox, where we use the CSS Font API by default.)

[Isomorphic]

If the CSS Font API approach worked for you, please let us know so we can note down the limitation and workaround in our docs.

[Blama]

Hi Isomorphic,

yes, it works for me. In detail:
Using FF 58.0.1 it works out of the box as you say.
Firefox only requests those fonts that are needed, meaning if there is a definition like

src: local('Dosis Bold'), local('Dosis-Bold'), url(font/Dosis_700.woff) format('woff');

and the font is present locally, the font is not requested from the server.
If the font is not present all requests are as expected. Also caching works as expected - so no new request for a normal reload, but for a Ctrl-F5 reload.

For Chromium 64 is as follows: You need to enable window.isc_useCSSFontAPI = true like you say.
It then behaves the same like FF, but does not support local(), so if a font is installed but not in the browser cache it will be fetched nevertheless (and will be in the cache then).

IE Edge and IE 11 behave like FF 58.0.1

FF26 does not preload at all.

So from you point of view you could also enable window.isc_useCSSFontAPI = true as default.
I'll add it now to my start page.

Best regards
Blama

[Isomorphic]

The defaults for Chrome were chosen because the measurement approach was found to have better performance in several situations, so we don't necessarily want to change the defaults at this time. However, we'll update the docs to reflect that using the CSS Font APIs is a solution to the original problem you mentioned.