The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS icon-fonts pause before rendering

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #165645

    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

    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.?


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


    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,


    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.