Wait for fonts to load before rendering web page

Question

I\'m using @font-face to embed fonts in my website. First the text renders as the system default, and then (once the font file has loaded presumably) the correct font render

Answer 1

This code works very well for me. It uses the Font Loading API which has good support among modern browsers.

The trick is to set the CSS color to transparent for elements using the font. Once loaded this is reset by adding font-loaded class to element.

Please replace DemoFont with something meaningful for your project to get it work.