How to minimize the delay in loading awesome font icons?

Question

I linked the miniature CSS of the Awesome font to the Bootstrap CDN on the webpage. The problem is that the icons appear later than the rest of the page content after a visible delay.

What is the best way to get rid of this delay? (FYI, I already included this CSS file above all the other CSS and JS links in my head.)

Answer 1

Minimized css will not make much difference in load time. This font awesome css file refers to the path to the external font files that will be loaded after the page loads. You can see the delay in the font of the amazing website: https://fortawesome.imtqy.com/Font-Awesome/icons/

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

You can base64 encode fonts and include them directly in your css site. This will significantly increase the load time of the css site, but it will get rid of the flash. Although this may not work in all browsers, I would not recommend it.

You can try placing awesome css font and fonts directly on your server. CDN may cause delays.

Answer 2

Try changing url () to data-uri ()

LESS:

 data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), 

http://lesscss.org/functions/#misc-functions-data-uri