Use the CSS font loading API. Not supported in all browsers yet (MDN, W3C). You can call document.fonts to get a FontFaceSet object.
check(fontSpec)
– returns whether all fonts in the given font list have been loaded and are available. The fontSpec
uses the CSS shorthand syntax for fonts.document.fonts.check('bold 16px Roboto'); // true or false
document.fonts.ready
– returns a Promise indicating that font loading and layout operations are done.
1 2 3 4 5 6 7 8 9 10 |
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'); }; |
Use Font Face Observer – its a small @font-face
loader and monitor compatible with any web font service. It will monitor when a web font is applied to the page and notify you. It does not limit you in any way in where, when, or how you load your web fonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.
1 2 3 4 5 6 7 8 9 |
var font = new FontFaceObserver('My Family', { weight: 400 }); font.load().then(function () { console.log('Font is available'); }, function () { console.log('Font is not available'); }); |
Use jQuery-FontSpy.js, works by checking the change in width of a string.
1 2 3 4 5 6 7 8 9 |
fontSpy('My Icons', { glyphs: '\ue81a\ue82d\ue823', success: function() { //alert("My Icons loaded successfully"); }, failure: function() { //alert("My Icons failed to load"); } }); |
Use Webfont Loader, if loading fonts from Typekit , Fonts.com, Google, Fontdeck or custom location.
This introduces the following events:
loading
– This event is triggered when all fonts have been requested.active
– This event is triggered when the fonts have rendered.inactive
– This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.fontloading
– This event is triggered once for each font that’s loaded.fontactive
– This event is triggered once for each font that renders.fontinactive
– This event is triggered if the font can’t be loaded.
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script> <script> WebFont.load({ google: { families: ['Droid Sans', 'Droid Serif'] } }); </script> |
I am a full-stack developer. My expertise include:
I love programming, design and know my way around server architecture as well. I would never feel complete, with one of these missing.
I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.
Apart from that, I am a peace loving guy who tries to have people around him that think the same. I truly believe in the principle: “If you help someone, someone will help you, when you need it."