Detect when a font loads.

onFontLoaded.js

function onFontLoaded(fontFamily) {
  const font = `1rem ${fontFamily}`;
  return new Promise((resolve, reject) => {
    const isFontAvailable = document.fonts.check(font);
    if (isFontAvailable) {
      resolve();
    } else {
      document.fonts.ready
        .then(() => {
          if (document.fonts.check(font)) {
            resolve();
          } else {
            reject(new Error("Unable to resolve font"));
          }
        })
        .catch(reject);
    }
  });
}

// Example of use
onFontLoaded("Material Icons")
  .then(() => {
    console.log("Material Icons has loaded");
  }).catch(error => {
    console.log("Problem loading Material Icons");
    console.error(error);
  });