What's the easiest way to use google font when using Gatsby JS?

[mrchow19910319]

I am using Gatsby JS to build myself a blog.

I am wondering, What's the easiest way to use google font when using Gatsby JS?

 

I *think* there are a few ways of doing that,

 

• adding it to react helmet
• adding it to typography.js
• etc

Also I got syntax error whenever I add this into my typography.js file: 

 

//customize fonts here:


// set default font size to 16 px
import Typography from "typography";  
const typography = new Typography({ 
  baseFontSize: "16px",
  googleFonts:[
    name: 'Montserrat',
    styles: [
      '100',
      '300',
      '400'
    ],
  ]

});  
export default typography;

its on the line: name:'Montserrat'

I dont know how to fix it.

[Origami Cactus]

Not an answer but is there any reason you are adding the font with JS, instead of CSS?

Isnt css used for fonts and styling?

[BobVonBob]

I believe you don't need the comma

const typography = new Typography({ 
  baseFontSize: "16px",
  googleFonts:[
    name: 'Montserrat',
    styles: [
      '100',
      '300',
      '400'
    ], <-- here
  ]

});

 

Edited February 2, 2019 by BobVonBob
Nevermind you do

[mrchow19910319]

4 minutes ago, BobVonBob said:

I believe you don't need the comma

const typography = new Typography({ 
  baseFontSize: "16px",
  googleFonts:[
    name: 'Montserrat',
    styles: [
      '100',
      '300',
      '400'
    ], <-- here
  ]

});

 

nope still gives out same error

[BobVonBob]

Okay got it, I believe the correct syntax is

const typography = new Typography({ 
  baseFontSize: "16px",
  googleFonts:[
    { //wrap in braces
      name: 'Montserrat',
      styles: [
        '100',
        '300',
        '400',  //bonus comma here
      ],
    },  //why does this syntax have so many commas
  ],
});

 

Edited February 2, 2019 by BobVonBob
fix

[mrchow19910319]

solved it:

 

googleFonts={name: 'Montserrat', styles: [ '100', '300', '400' ] }