How can I detect whether a web font is loaded and hide text nodes until that happens?

Question

Webkit handles the time before a web-font (@font-face) loads by hiding the text nodes. But not all browsers do this, some show a standard font until the font loads, which I want to avoid. I want to show my page elements, but hide all text nodes until the webfont is loaded.

Can I do this with JavaScript?

I'd like to do it without a 3rd party library so I can learn how it's done.

The good Mr. Irish went on about this once: http://www.paulirish.com/2009/fighting-the-font-face-fout/ — Will, Aug 29 '15 at 01:48

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

This question can be answered if you google a little bit more ...

Answer can be found here

jQuery font-spy allows to handle what happens when a font is not loaded yet or is damaged

Original Repository Demo Fonts

edited May 23 '17 at 11:47

Community

1
1

answered Aug 29 '15 at 07:16

Carlos Delgado

2,930
4
23
49

How can I detect whether a web font is loaded and hide text nodes until that happens?

1 Answers1