CODEWITHSUNDEEP
gatsbytypographygoogle-fonts
alehel
alehel

Reputation: 386

Google Fonts using Typography.js and Gatsby

I'm following the Gatsby tutorials and reached the point where one integrates Typography JS in the code (https://www.gatsbyjs.org/tutorial/part-three/#using-plugins). I'm having trouble using Google fonts however. They simply don't load.

Here is my src/utils/typography.js file

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  googleFonts: [
    {
      name: "Bonbon",
      styles: ["700"],
    },
    {
      name: "Hanalei",
      styles: ["700"]
    }
  ],
  headerFontFamily: ["Bonbon"],
  bodyFontFamily: ["Hanalei"],
})

export default typography

And here is my gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

I chose fonts which look very different from standard fonts purely so that I would know straight away once I got them to work. I've not been able to get them working however. Am I missing something? baseFontSize and baseLineHeight are both working as expected, so the util file is being read.

Upvotes: 1

Views: 959

Answers (1)

diedu
diedu

Reputation: 20785

It seems to be a problem specific for the fonts you selected, they do not take styles as option in google fonts, passing a empty array in styles fix the problem

{
  name: "Bonbon",
  styles: [],
},
{
  name: "Hanalei",
  styles: []
}

When debugging this kind of issues check also the network tab in developers tools to see if necessary assets are downloaded correctly, that's how I figured out this solution

Upvotes: 2

Related Questions