gatsby and typefaces

[Jaikant]

I am trying to use gatsby with typefaces.
After installing the fonts. I did an import from src/layouts/index.js as done in gatsbygram

import 'typeface-quattrocento-sans';
import 'typeface-work-sans';

When I do a build, and check the index.html I am still seeing

<link href="//fonts.googleapis.com/css?family=Work+Sans:600|Quattrocento+Sans:400,400i,700" rel="stylesheet" type="text/css"/>

But, this is what I am trying to avoid. Is there something I need to do, so this is not included in the index.html file everytime?

[mpolinowski]

Hi,

this is a task that I also have to tackle soon - the starter templates come with the typography plugin and the Gatsby website also has this typography.js file in utilities with overwrites for default styles.

I am curious - are you using one of the templates or just the vanilla gatsby-cli output?

[Jaikant]

@mpolinowski I had picked up one of the templates. But then I changed it quiet a bit since then.
The template did not bring in the typography plugin as far as I can remember, I added that along with the typography.js file in utilities as shown in the gatsby tutorial.

[KyleAMathews]

You need to remove googleFonts from the Typography.js theme in order to prevent the Google Fonts link from being added. gatsby-plugin-typography auto adds the link to google fonts if it sees them defined on the typography.js object.

[Jaikant]

Nice. I just deleted the googleFonts property from the fairyGates theme and it worked like charm.

import fairyGatesTheme from 'typography-theme-fairy-gates';

delete fairyGatesTheme.googleFonts;
const typography = new Typography(fairyGatesTheme);