Wondering what’s next for npm?Check out our public roadmap! »

    @fuzzco/font-loader

    1.0.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i @fuzzco/font-loader

    DownloadsWeekly Downloads

    30

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    7.56 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar