This will load the font and return a promise that is resolved when the font has loaded, or rejected if the font fails to load. That’s all there is to it.

You load this web font by creating a new FontFaceObserver instance and calling its load method.

To keep things simple, let’s assume you have the following @font-face rule somewhere in your style sheet.

Font Face Observer gives you control over web font loading using a simple promise based interface. It doesn’t matter where your fonts come from: host them yourself, or use a web font service such as Google Fonts , Typekit , Fonts.com , and Webtype .

You can use npm to install the fontfaceobserver module. Font Face Observer is also available on Bower and installable through jspm.

$ npm install fontfaceobserver --save

You can then load the module by requiring it in your code.

var FontFaceObserver = require('fontfaceobserver');

Not using modules?

You can also download a copy and manually include it in your project. You can then use the global Font­Face­Observer constructor to load your fonts.

The fontfaceobserver module exposes a single constructor that takes two parameters: a family name and an optional font description object.

The font description object may contain three optional proper­ties: weight , style , and stretch . The values of these properties should match the web font you’re trying to load. If a property is not present it will default to normal .

var font = new FontFaceObserver('Output Sans', { weight: 300, style: 'italic' });

To load a font, call the load method on a FontFaceObserver instance. It’ll return a promise that resolves when the font loads, or rejected when the font fails to load.

var font = new FontFaceObserver('Output Sans'); font.load().then(function () { console.log('Output Sans has loaded.'); }).catch(function () { console.log('Output Sans failed to load.'); });

If your font doesn’t contain latin characters Font Face Observer may not be able to load it. In this case you should pass a custom string to the load method. The string should contain characters that are present in the font.

var font = new FontFaceObserver('Source Han Sans'); font.load('中国').then(function () { console.log('Source Han Sans has available'); });

Font Face Observer supports the following browsers: Chrome, Firefox, Opera, Safari, Internet Explorer 8 and above, Edge, and the Android browser.