Detecting Font Loading Failure or Completion with the FontFace API

These examples show how JavaScript can trigger custom font loading, detect success or failure, inspect status, and fall back to a traditional request-style check.

1. Load a Font and Report Success or Failure

Code:

// Compatibility check to avoid errors in older browsers
if (window.FontFace) {
  var fontUrl = fontUrlInput.value;
  var fontFile = new FontFace('Demo Loaded Font', 'url(' + fontUrl + ')');

  fontFile.load().then(function () {
    document.fonts.add(fontFile);
    preview.style.fontFamily = 'Demo Loaded Font, system-ui, sans-serif';
    log.textContent = 'Success';
  }, function (err) {
    log.textContent = 'Failed: ' + err;
  });
}

Result:

The quick brown fox jumps over 1234567890
Click “Load Font” to run the FontFace load check. The default data URL intentionally fails.

2. Read the Loaded FontFace Object

Code:

var fontFile = new FontFace('Readable Demo Font', 'local("Arial")');

fontFile.load().then(function (fontface) {
  output.textContent = fontface.family;
});

Result:

The returned FontFace object will print its family name here.

3. Inspect FontFace Properties and Status

Code:

var fontFile = new FontFace('Configured Demo Font', 'local("Arial")', {
  style: 'italic',
  weight: '700',
  display: 'swap',
  stretch: 'normal'
});

before.textContent = fontFile.status;

fontFile.load().then(function () {
  after.textContent = fontFile.status;
  family.textContent = fontFile.family;
  display.textContent = fontFile.display;
});

Result:

Before load-
After load-
Family-
Display-
FontFace API CSS @font-face equivalent
FontFace.displayfont-display
FontFace.familyfont-family
FontFace.featureSettingsfont-feature-settings
FontFace.stretchfont-stretch
FontFace.stylefont-style
FontFace.weightfont-weight

4. Use the loaded Promise and status Values

Code:

var fontFile = new FontFace('Promise Demo Font', sourceSelect.value);

statusLog.textContent = 'Initial status: ' + fontFile.status;

fontFile.loaded.then(function () {
  statusLog.textContent += '\nloaded promise resolved: ' + fontFile.status;
}, function () {
  statusLog.textContent += '\nloaded promise rejected: ' + fontFile.status;
});

fontFile.load();
statusLog.textContent += '\nAfter load() call: ' + fontFile.status;

Result:

Choose a source and run the demo.

5. Traditional XMLHttpRequest Fallback

Code:

// Traditional implementation
var xhr = new XMLHttpRequest();
xhr.open('get', requestUrl.value);
xhr.onload = function () {
  xhrLog.textContent = 'Loaded successfully! HTTP ' + xhr.status;
};
xhr.onerror = function () {
  xhrLog.textContent = 'Failed to load!';
};
xhr.send();

Result:

This simulates the older request-based fallback with a self-contained data URL.