How to determine when a Google web font is ready and displayed on a page?

Question

I need to trigger an action as soon as the fonts on my page switch to google. (I use css mode) Is there any DOM event fired when switching fonts?

Answer 1

Not sure if this is what you need, but you can try. If you use WebFont Loader , perhaps you can track it.

WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. WebFont Loader also allows the use of several web font providers. It was developed jointly by Google and Typekit.

You can do this using some callbacks such as loading() , active() , fontactive(fontFamily, fontDescription) etc or checking some attribute classes.

Here , hope this helps you.

Answer 2

David Walsh has a guide to using the Google Webfonts API: http://davidwalsh.name/google-fonts-api

Here is an example from his post:

 WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] }, /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */ loading: function() { // do something }, /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ fontloading: function(fontFamily, fontDescription) { // do something }, /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ fontactive: function(fontFamily, fontDescription) { // do something }, /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ fontinactive: function(fontFamily, fontDescription) { // do something }, /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */ active: function() { // do something }, /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */ inactive: function() { // do something } }; /* async! */ (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })();