Search code examples
javascriptwebfonts

How can I detect when a google web font is ready and displayed in the page?

I need to trigger an action as soon as the fonts in my page switch to google's. (I'm using the css mode) Is there any DOM Event fired at the font switch?

Solution

  • Not sure if this is what you need but you may give it a try. If you use WebFont Loader then may be you can track it.

    The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The WebFont Loader also lets you use multiple web-font providers. It was co-developed by Google and Typekit.

    You can do it using some callbacks like loading(), active(), fontactive(fontFamily, fontDescription) e.t.c. or checking some class attributes.

    Here it is, hope it'll help you.