loading fonts with JavaScript using `new FontFace` (to avoid FOUF)

fontface-loading.js

(async function () {
  async function loadFonts () {
    if (!('FontFace' in window)) {
      return;
    }

    const fonts = [
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Light.woff2)'),  // 400
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Regular.woff2)'),  // 500
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Medium.woff2)'), // 600
    ];

    Promise.all(fonts).forEach(fontsLoaded => {
      fontsLoaded.forEach(font => {
        await font.load();
        document.fonts.add(font);
      });
      document.body.classList.add('fonts-loaded');
    });
  }

  await loadFonts();
})();