where to add require('fontname') in gatsby

[lfeddern]

Hi there,

Atm using google fonts gastby package but would like to self host a google font to improve pagespeed.

Where in my gastby project should I add the require('fontname')?

Thanks v much.

[KyleAMathews]

In your layout component.

[lfeddern]

thanks!

[skube]

As an example (using ES6 Modules):

//layouts/index.js
import React from 'react';
import 'typeface-FONTNAME`; //eslint-disable-line

optional: suppress eslint missing css extension error

Then, reference in your CSS:

body {
  font-family: FONTNAME;
}

note: you may still experience a flash of un-styled text (FOUT)

[HebaruSan]

import 'typeface-roboto' seems to attempt to load a CSS file as Javascript source (I'm not using Gatsby, just Electron and Material-UI):

Is there another flag needed to make this work?

[DamianPereira]

@HebaruSan You need webpack or something similar to use typefaces from npm. Webpack uses loaders like css-loader to translate that require into whatever your environment is configured to do (inline css, extract to files, bundle, etc). How are you managing your assets?

Here's an example on how to setup webpack with material-ui.

[HebaruSan]

Thanks, but I think webpack was recommended against for Electron projects. Right now I am using electron-forge for packaging.

I eventually put this in my index.html instead, seems to work:

        <link rel="stylesheet" type="text/css" href="../node_modules/typeface-roboto/index.css" />

[DamianPereira]

Oh, didn't know webpack was not recommended for electron, it's what I used last time. Well linking the CSS works too, glad you could make it work.

[nsisodiya]

@KyleAMathews we are loading it in gatsby-browser.js. what is advantage/disadvantages in loading in gatsby-browser.js vs layout component.