Long delay for active to be called when using custom fonts

[mobileben]

I have locally defined fonts, which I'm loading as custom fonts. These are actually Google fonts, however I have them local. The primary reason for this is because this will be a Cordova app, so I don't want to have to hit the external network if I can avoid it.

I declare these custom fonts with font-face.

        @font-face {
            font-family: "Bowlby One SC";
            src: url("assets/BowlbyOneSC-Regular.ttf") format('truetype');
        }
        @font-face {
            font-family: "Roboto", sans-serif;
            src: url("assets/Roboto-Regular.ttf") format('truetype');
        }

Code-wise, I load it via:

WebFont.load({
    google: {
        families: ['Pacifico' ]
    },
    custom: {
        families: [ 'Roboto', 'Bowlby One SC']
    },
    active: function() {
        app.webFontsLoaded = true;
        if (app.coreAssetsLoaded) {
            app.initialStartGame();
        }
    },
    fontloading: function(name: string){ console.log("L " + name)},
    fontactive: function(name: string){ console.log(name)}
});

You can see I have some debug on when loading occurs and when a font is active. I did have some debug logging in active, but I've removed it from this code snippet.

What I find is that when custom is not used, it loads quickly. However, when custom is used, it's very slow to load even though I see the loading message and active message for the font. There is a clear 1-2+ second delay before the actual active is being called.

Visually I see a white screen for 1-2+ seconds. Then the game starts.

[mobileben]

Quick update here, if I use a Promise in conduction with FontFace and and using that to determine when fonts are ready ... this doesn't suffer from the long delay.

[Szymon-dziewonski]

@mobileben could you provide any code with exmaple please ?

[mobileben]

Sorry for the delay, let me get one together ...

[mobileben]

@Szymon-dziewonski apologies for the delay. Here is a code example. Please let me know if you have any questions.

https://github.com/mobileben/longdelay-webfontloader

[mobileben]

@Szymon-dziewonski just wanted to check in to see if you had a chance to look at this. Thanks!

[Szymon-dziewonski]

Hey @mobileben sorry, I checked it, but then I switched to native preload, precatch with loading font with display: swap;

<link as="style" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,500,600:latin,cyrillic&amp;display=swap" rel="preload">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,500,600:latin,cyrillic&amp;display=swap" rel="stylesheet">
<link href="https://d20j2y33fgycdj.cloudfront.net/landingpage-assets/favicon-c0d3880e6047d7279b581b71436df303aa1a4ce7396ad55d5ae4c670f3933d70.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">

and using fontfaceobserver package for checking if font is loading.
const sourceSansPro = new FontFaceObserver('Source Sans Pro');

        const sourceSansPro = new FontFaceObserver('Source Sans Pro');

        sourceSansPro.load().then(()=> {
            success();
        }, ()=> {
            error();
            console.log('Source Sans pro is not available');
        });

It's working much faster. Now loading fonts as handle by browser which is fast than doing it in JS and then you can just observe it via package. Anyway thank you very much for you time for sharing your code, appreciate that !

[sarthikg]

Yess this is a very irritating thing. If I do it the normal way and let my webpage suffer the FOUT, then that flash lives for just a split second, but if I wait for the active function to kick in, it takes like 4-5 seconds. This is such a big difference.