LoadFont

A simple wrapper for FontFaceObserver library with more comfortable configuration for font-heavy web projects.

With ES6, Promises and love.

How to use

Write some CSS

/* A lot of @font-face declarations... */

/* Classes for a 'progressive' fonts loading */
.js-font-loaded {
    font-family: Lora, sans-serif;
}

.js-font-loaded--bold .bold {
    font-weight: 700;
}

Add FontFaceObserver and LoadFont on your page

<script src="src/fontfaceobserver.js"></script>
<script src="src/loadFont.js"></script>

Write config

loadFont
    .load([
        {
            name: "Lora",
            timeout: 2000,
            settings: {
                weight: 400,
                style: 'normal'
            },
            onload: function () {
                document.documentElement.classList.add('js-font-loaded')
            },
            next: {
                name: "Lora",
                timeout: 5000,
                settings: {
                    weight: 700,
                    style: 'normal'
                },
                onload: function () {
                    document.documentElement.classList.add('js-font-loaded--bold')
                }
            }
        }
    ])
    .then(function () {
        console.log('All fonts loaded.');
    });