Gatsby: Typekit support broken w/ Gatsby 1.0

[kevinschaich]

Since migrating to Gatby 1.0, I haven't been able to get a Typekit font working with Gatsby. Has anyone had success with this?

I've tried the following two packages so far:

https://www.npmjs.com/package/react-typekit
this does not play nice with Sharp, can post logs here if it'd be helpful.

https://www.npmjs.com/package/webfontloader
this one needs access to window. I tried customizing webpack config via gatsby docs, that gets me past the window error but then manifests another.

Thank you!

[kevinschaich]

Finally got it to work using this package. Solution requires three steps:

1. npm add --save webfontloader or yarn add webfontloader

2. In the layout where you want to use the font, add a ComponentDidMount declaration as follows:

import WebFont from 'webfontloader';

...

  componentDidMount = () => {
    WebFont.load({
      typekit: {
        id: 'xxxxxx'
      }
    });
  }

1. In your gatsby-node.js, add the following:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /webfontloader/,
      loader: 'null-loader'
    })
  }
}

Now you can use your font as normal in any sub-component of the layout where you loaded the font.

In a future release and if enough people use it, maybe we can add support for Typekit in typography, similar to how it allows loading of Google Fonts.

[grgur]

Understanding if the code is executed during Server Side Rendering (SSR) or Client Side Rendering (CSR) can be used for purposes beyond conditionally loading modules.

That said, you could add something like this to your gatsby-node.js

const webpack = require('webpack');

exports.modifyWebpackConfig = ({ config, stage }) => {
  config.merge({
    plugins: [
      new webpack.DefinePlugin({
        _SSR_: stage === 'build-html',
      }),
    ],
  });

  return config;
};

then in your code you could load WebFontLoader like this:

if (_SSR_) {
  const WebFont = require('webfontloader');
  WebFont.load({
    google: {
      families: ['Montserrat:300,400,600', 'Roboto', 'Roboto+Condensed'],
    },
  });
}

[rickymetz]

I've been banging my head against the wall trying to get this to work.
I used the gatsby-starter-basic starter which has this code for its layouts/index.js:

import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import WebFont from 'webfontloader';

import '../../sass/style.scss';

const TemplateWrapper = ({ children }) => (
  <div>
    <Helmet
      title="Gatsby React Boilerplate"
    />
    {children()}
  </div>
);

TemplateWrapper.propTypes = {
  children: PropTypes.func,
};

export default TemplateWrapper;

I'm not sure where to implement the code shown in @kevinschaich's comment above to get webfont loader to work. I'm at my wits end and any help would be appreciated.

[m-allanson]

@rickymetz you'll need to convert your TemplateWrapper component from a stateless React component to a class-based React component. That will allow you to add the componentDidMount lifecycle method.

componentDidMount runs in the browser and not when doing server side rendering, which is why it's safe to call WebFont.load there.