How to get notification after downloading web font

Question

The Google Web Fonts API offers a way to define callback functions that will be executed if the font has finished loading or cannot be loaded, etc. Is there a way to achieve something similar using CSS3 web fonts (@ font-face)

Answer 1

2015 update

Chrome 35+ and Firefox 41+ implement the API http://www.w3.org/TR/css-font-loading/ "rel =" noreferrer "> W3C. Call document.fonts to get a FontFaceSet object that has several Useful APIs to determine font download status:

• check(fontSpec) - whether all fonts in this list of fonts returns loaded and available. fontSpec uses shorthand CSS syntax for fonts .
  Example: document.fonts.check('bold 16px Roboto'); // true or false document.fonts.check('bold 16px Roboto'); // true or false
• document.fonts.ready - Returns Promise indicating that font loading and layout operations are in progress.
  Example: document.fonts.ready.then(function () { /*... all fonts loaded...*/ });

Here is a snippet showing these APIs, plus document.fonts.onloadingdone , which offers additional information about the faces of the font.

 alert('Roboto loaded? ' + document.fonts.check('1em Roboto')); // false document.fonts.ready.then(function () { alert('All fonts in use by visible text have loaded.'); alert('Roboto loaded? ' + document.fonts.check('1em Roboto')); // true }); document.fonts.onloadingdone = function (fontFaceSetEvent) { alert('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded'); }; 

 <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <p style="font-family: Roboto"> We need some text using the font, for the font to be loaded. So far one font face was loaded. Let add some <strong>strong</strong> text to trigger loading the second one, with weight: 700. </p> 

IE 11 does not support API. Check out the available policies or support libraries if you need to support IE:

• Web Font Loader - developed by Google and Adobe
• FontFaceOnload - A Lighter , Similar Approach to the Web Font Downloader
• FontLoader - polyfill

Answer 2

The JS library used by the Google Web Fonts API (and Typekit) can be used without a service: WebFont Loader .

It defines callbacks for what you ask, and many more .

Answer 3

Tested in Safari, Chrome, Firefox, Opera, IE7, IE8, IE9:

 function waitForWebfonts(fonts, callback) { var loadedFonts = 0; for(var i = 0, l = fonts.length; i < l; ++i) { (function(font) { var node = document.createElement('span'); // Characters that vary significantly among different fonts node.innerHTML = 'giItT1WQy@!-/#'; // Visible - so we can measure it - but not on the screen node.style.position = 'absolute'; node.style.left = '-10000px'; node.style.top = '-10000px'; // Large font size makes even subtle changes obvious node.style.fontSize = '300px'; // Reset any font properties node.style.fontFamily = 'sans-serif'; node.style.fontVariant = 'normal'; node.style.fontStyle = 'normal'; node.style.fontWeight = 'normal'; node.style.letterSpacing = '0'; document.body.appendChild(node); // Remember width with no applied web font var width = node.offsetWidth; node.style.fontFamily = font; var interval; function checkFont() { // Compare current width with original width if(node && node.offsetWidth != width) { ++loadedFonts; node.parentNode.removeChild(node); node = null; } // If all fonts have been loaded if(loadedFonts >= fonts.length) { if(interval) { clearInterval(interval); } if(loadedFonts == fonts.length) { callback(); return true; } } }; if(!checkFont()) { interval = setInterval(checkFont, 50); } })(fonts[i]); } }; 

Use it as:

 waitForWebfonts(['MyFont1', 'MyFont2'], function() { // Will be called as soon as ALL specified fonts are available }); 

Answer 4

Update 2017

The JS FontFaceObserver library is by far the best, easiest, cross-browser solution since 2017. It also provides Promise based on .load() .

Answer 5

The window.load event will light up when everything loads - this should include fonts so you can use this as a call back. However, I don’t think you need you to use the web font downloader as

In addition to google, typekit, options for coasters and monotypes, there is also a custom module that can load a stylesheet from any provider’s web font.

WebFontConfig = {custom: {families: ['OneFont', 'AnotherFont'], URL: ['http://myotherwebfontprovider.com/stylesheet1.css', 'Http://yetanotherwebfontprovider.com/stylesheet2.css']} };

The library dispatches the same events no matter which provider you specify.

Answer 6

Try using ModernizerJS to solve this problem.