What is the syntax to add multiple fonts with Gatsby Plugin Google Fonts?

Question

This works for the Lobster Two font:

  {
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Lobster Two`,
      `source sans \pro:400, 400i`, // you can also specify font weights and styles
    ],

    
    display: "swap",
  }

I've tried adding Poppins inside of the fonts array and adding a second fonts array but neither have worked. Every video and article so far sees fit to stop at one font as a demonstration.

Thanks for the help.

Answer 1

With gatsby-plugin-google-fonts you need to add each specific type like:

fonts: [
   `montserrat`, `montserrat\:700`, `montserrat\:900`, `open sans`
  ]

This is because the Google Fonts API has been updated to v2.

I'd recommend using gatsby-plugin-google-fonts-v2 instead:

plugins: [
  {
    resolve: `gatsby-plugin-google-fonts-v2`,
    options: {
      fonts: [
        {
          family: 'Lobster Two',
        },
        {
          family: 'Source Sans Pro',
          weights: ['400, 400i']
        }
      ]
    }
  }
];

If the snippet above doesn't work (check the <link> generated in the <header>) try following the suggested approach in this GitHub thread (transpiling before the format):

  {
    resolve: `gatsby-plugin-google-fonts-v2`,
    options: {
      fonts: [
       {
         family: 'Lobster Two',
      },
      {
        family: 'Source Sans Pro:ital,wght@1,400;',
      },
     ]
   }
 }