Search code examples
javascriptfontswebfontsgoogle-webfonts

How to wait for webfonts to load?

I have a canvas element that uses webfonts. Even if I use jquery's onload method ($(function () {});), it seems that the fonts can still be unavailable when onload is run--at times my canvas renders no text, and at other times it works just fine.

Anyway I can pass some sort of callback to google webfonts to run after all the fonts have loaded?

Solution

  • If you embed the fonts through the "WebFont Loader" (used by Google and Typekit), you can subscribe to the active event. It will be fired once all fonts have been loaded.

    Have a look at the docs: https://developers.google.com/webfonts/docs/webfont_loader#Events