Skip to content
This repository has been archived by the owner on Jun 22, 2024. It is now read-only.

odnari/loadFont

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.');
    });

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published