Package Exports

gatsby-plugin-react-webfont-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-plugin-react-webfont-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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