@fuzzco/font-loader NPM

Load fonts quickly and easily. Wrapper for Font Face Observer.

import loadFonts from '@fuzzco/font-loader'

loadFonts([
    {
        name: 'Font Name',
        weights: [300, 400, 700],
        styles: ['normal', 'italic']
    }
])

HTML/CSS

You'll need to declare the fonts you want to use in your CSS. For example, in <head>:

<head>
    <link
        href="https://fonts.googleapis.com/css?family=Oswald"
        rel="stylesheet"
    />
</head>

JS

Install via npm:

npm install @fuzzco/font-loader

You can pass an object with string name (required) and arrays weights and/or styles:

loadFonts({
    name: 'Font Name',
    weights: [400], // optional
    styles: ['normal'] // optional
})

Or an array of such objects:

loadFonts([
    {
        name: 'Font Name',
        weights: [400, 700],
        styles: ['normal', 'italic']
    },
    {
        name: 'Second Font',
        weights: [400, 500],
        styles: ['normal']
    }
])

You can also treat the result as a promise:

// chaining:
loadFonts({ name: 'Font Name', weights: [400, 700] }).then(
    result => console.log(result) // prints an array of the fonts loaded
)

// async/await
const result = await loadFonts({ name: 'Font Name', weights: [400, 700] })
console.log(result) // prints an array of the fonts loaded

Uses

Very useful for adding loading classes to avoid a flash of unstyled text:

document.body.classList.add('fonts-loading')
try {
    await loadFonts({ name: 'Font Name' })
    document.body.classList.add('fonts-loaded')
} catch {
    document.body.classList.add('fonts-error')
} finally {
    document.body.classList.remove('fonts-loading')
}

Fuzzco

fontfaceobserver

@infinitebrahmanuniverse/nolb-_fuz @everything-registry/sub-chunk-348 fuzznuxt

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago