JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<h1>
  Ideal Sans Light - Test
</h1>

<script>
async function loadFonts() {
    const font = new FontFace('Ideal Sans Light', 'url(https://blog.typography.com/fonts/woff/SentinelSSm-Book-Pro_Web.woff)');
    // wait for font to be loaded
    await font.load();
    // add font to document
    document.fonts.add(font);
    // enable font with CSS class
    document.body.classList.add('fonts-loaded');
}

setTimeout(loadFonts, 1000);
</script>

CSS

h1 {
  font-family: 'Ideal Sans Light';
  
}
body.fonts-loaded {
  
  background-color: #ccc;
}