Text flickers before switch to icon with Material Icons font

[kramerkm]

We've added this to our Gatsby project as a better way to load Material Icons from Google Fonts. Here is what we have for our config options:

resolve: 'gatsby-omni-font-loader',
options: {
    mode: 'async',
    enableListener: true,
    preconnect: ['https://fonts.gstatic.com'],
    preload: ['https://fonts.googleapis.com/css?family=Material+Icons+Sharp'],
    web: [{
	name: 'Material Icons Sharp',
	file: 'https://fonts.googleapis.com/css?family=Material+Icons+Sharp'
    }]
}

Unfortunately, it seems the listener triggers the wf-material-icons-sharp-all class before it's actually loaded and it shows the icon text before flickering to the icon. Any ideas on how to fix this?

[codeAdrian]

Hi. Thanks for reaching out. The "async" mode causes a FOUT because it renders with fallback font. You need to switch the mode to "render-blocking".

[kramerkm]

I thought with the listener though it would trigger when the font is loaded. Currently we have it setup that the icons are visibility: hidden and once loaded switches to visibility: visible; to bypass that flicker. But sounds like even that route may not work?

[codeAdrian]

I see. Will check it out. Does this issue occur on the latest 2.0 version?

[kramerkm]

Yeah, hadn't tried previous version. Though I did see that v1 had an "interval" option that could be useful.

[codeAdrian]

As a quick fix, I can recommend adding a transition CSS property to icons and delay it by 0.1-0.2 seconds with duration of 0 seconds. This should somewhat mitigate the issue until I find a proper fix.

[kramerkm]

I tried implementing that (both in our stylesheet and inline style in our custom html file) but it seems as though it never runs. Styles show on the icons, but it's like the .wf-all class is already on it by the time the css loads so the transition/delay never run.

[mehimanshupatil]

hey seems like a bug in the code. what I found is font load always fails. I have made PR #30

[kramerkm]

@codeAdrian Just a heads up - Updated to latest version (2.0.1), but still running into the same issue. It appears that the eventHandler adds a 'wf-all' class to the body but about 1-2 seconds later the font actually loads.

[mehimanshupatil]

@kramerkm currently fonts.load() returns empty if @font-face is not present or is loaded after fonts.load() code is run. refer -> Stackoverflow

but what i found was library inserts link tag as <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" /> but if i change it to <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" /> it works.

for now you can add <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" /> in header to solve issue

@codeAdrian we need to update rel="preload" as="style" to rel="stylesheet" refer MDN

[codeAdrian]

Hello. Thanks for the heads up. I've pushed the fix you proposed. Let me know if that fixes your issue

https://github.com/codeAdrian/gatsby-omni-font-loader/commit/381c82f66fd11cb5084a1f0b0ea3db2ac9c4225f

Current version is 2.0.2.