Open lfeddern opened 6 years ago
In your layout component.
thanks!
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)
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?
@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.
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" />
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.
@KyleAMathews
we are loading it in gatsby-browser.js
. what is advantage/disadvantages in loading in gatsby-browser.js
vs layout
component.
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.