<style>html.fonts-loading{visibility:hidden;opacity:0}</style>
<script>document.documentElement.classList.add('fonts-loading');</script>

<link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay-Italic.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="{{{uiRootPath}}}/font/MonaspaceNeon-Var.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="{{{uiRootPath}}}/font/MonaspaceXenon-Var.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

<script>
(function() {
  'use strict';
  
  var revealed = false;
  
  var reveal = function() {
    if (revealed) return;
    revealed = true;
    document.documentElement.classList.remove('fonts-loading');
  };
  
  setTimeout(reveal, 3000);
  
  if (!('FontFace' in window) || !('fonts' in document)) {
    setTimeout(reveal, 100);
    return;
  }
  
  var uiRoot = '{{{uiRootPath}}}';
  var fonts = [
    { 
      family: 'Noto Sans', 
      url: uiRoot + '/font/NotoSansDisplay.woff2',
      descriptors: { style: 'normal', weight: '100 900', stretch: '62.5% 100%' }
    },
    { 
      family: 'Noto Sans', 
      url: uiRoot + '/font/NotoSansDisplay-Italic.woff2',
      descriptors: { style: 'italic', weight: '100 900', stretch: '62.5% 100%' }
    },
    { 
      family: 'Monaspace Neon', 
      url: uiRoot + '/font/MonaspaceNeon-Var.woff2',
      descriptors: { style: 'normal', weight: '400' }
    },
    { 
      family: 'Monaspace Xenon', 
      url: uiRoot + '/font/MonaspaceXenon-Var.woff2',
      descriptors: { style: 'italic', weight: '400' }
    }
  ];
  
  var loadPromises = fonts.map(function(f) {
    try {
      var face = new FontFace(f.family, 'url("' + f.url + '")', f.descriptors);
      return face.load().then(function(loaded) {
        document.fonts.add(loaded);
        return loaded;
      }).catch(function() {
        return null;
      });
    } catch (e) {
      return Promise.resolve(null);
    }
  });
  
  Promise.all(loadPromises)
    .then(function() {
      return document.fonts.ready;
    })
    .then(reveal)
    .catch(reveal);
})();
</script>