icon-fonts pause before rendering

[mmcgu1966]

I’m using the fontawesome icon font library which uses CSS to to insert a characte-code into a font-class-named i tag. the problem is that on page-load (in Chrome anyway) it can take a second for the fontawesome styling to kick-in, which means there’s a pause before the icons suddenly appear. I’ve tried all the tricks I can think of to no avail. Has anybody else seen this and come up with an answer?

• follow-up… I had thought the fontawesome tag was at the top of my CSS calls, but it wasn’t. I moved it higher-up and now its faster loading, though still not perfect in a page with a lot of font-icons

[Paulie_D]

Are you hosting the fonts yourself (the approved option) or using a CDN?

If the latter it’s going to take time for them to download.

Perhaps a link to your page so we can text for ourselves.?

[Paulie_D]

Hmmm…perhaps a Google of avoiding FOUT (Flash Of Unstyled Text)

[Podders]

This is a shot in the dark but I had a similar issue with Fontawesome where the icons would take a split second to render in Chrome but were fine in FF,

In my case it turns out that I had “Disable Cache” selected when devtools was open so the font files were never cached, hence they split second while the fonts were re-downloaded every browser refresh,

[Alen]

It could be JS issue if you’re doing a lot of DOM/style manipulations. The browser has to repaint every time change via JS occurs.

[Author]

Posts