gatsby-plugin-react-webfont-loader

Release 1.1.0

Webfontloader for Gatsby based in react-webfont-loader <https://gitlab.com/pekkis/react-webfont-loader/> created by Mikko Forsstrom

Homepage Repository npm Download

Keywords
React, Webfontloader, Fonts, Webfonts
License
BSD-3-Clause
Install
npm install gatsby-plugin-react-webfont-loader@1.1.0

Documentation

Webfonts loader for Gatsby V2

What?

A React wrapper for Typekit's webfontloader NPM package.

Why?

To load your webfonts more intelligently, avoid FOUT with them, and / or to ensure that they have REALLY loaded before doing something (use them in canvas etc). I hightly recommend you to reading the article about critical FOFT

How?

This is an example based in layout.js.

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'

import Header from './header'
import './layout.css'

const Layout = ({ children, data }) => {
  const config = {
    google:{
      families: [
        'Philosopher:400,400i,700,700i',
        'Alegreya+Sans:400,400i,700,700i'
      ],
    }
  }
  
  return(
    <WebfontLoader config={config}>
      <StaticQuery
        query={graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
        render={data => (
          <>
            <Helmet
              title={data.site.siteMetadata.title}
              meta={[
                { name: 'description', content: 'Sample' },
                { name: 'keywords', content: 'sample, something' },
              ]}
            />
            <Header siteTitle={data.site.siteMetadata.title} />
            <div
              style={{
                margin: '0 auto',
                maxWidth: 960,
                padding: '0px 1.0875rem 1.45rem',
                paddingTop: 0,
              }}
            >
              {children}
            </div>
          </>
        )}
      />
    </WebfontLoader>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Stats

Dependencies
2
Dependent packages
0
Dependent repositories
0
Total releases
2
Latest release
First release
Stars
0
Forks
0
Contributors
0
SourceRank
8

Development practices

Source repo 2FA enabled
TEXT!
Package manager 2FA enabled
TEXT!
Is security responsive
TEXT!
Dependencies are managed
TEXT!
Issue-free release available
TEXT!
Succession plan available
TEXT!
Package manager 2FA enabled
TEXT!

The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.

Learn more →

Releases

1.1.0
1.0.0

Something wrong with this page? Make a suggestion

Export .ABOUT file for this package

Last synced: 2022-05-03 04:39:09 UTC

Login to resync this project