JSFiddle - React, Tailwind, and code Playground

by cssGuy

HTML

<h1>Font Loading API in Chrome</h1>

<button type=button>Load webfont and ONLY THEN show content</button>

<hr>

<div id=content>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum doloribus recusandae asperiores iusto magnam cum blanditiis fugiat inventore est illum tempora nostrum. Atque error illo autem mollitia accusantium dignissimos magnam.
</div>

CSS

#content {
    font-size: 200%;
    color: white;
    background-color: #07c;
    padding: .5em;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

JavaScript

var content = document.querySelector('#content');

document.querySelector('button').addEventListener('click', function () {
    this.disabled = true;

    // 1. Define a webfont    
    new FontFace(
        'Handlee',
        'url(http://themes.googleusercontent.com/static/fonts/handlee/v3/6AfIXNH5pZ1Jj_pfExPOWQ.woff)',
        {}
    )
    
    // 2. Load it
    .load()
    
    // 3. And then…
    .then(function (face) {
        
        // …add it to the document
        document.fonts.add(face);
        
        // The webfont is ready. It’s safe to show content with this font now.
        content.style.fontFamily = 'Handlee, serif';
        content.style.opacity = 1;
    });
});