Gatsby - Adding Google fonts to Gatsby site - css

Question

I'm trying to add a Google Font (Mukta Malar) in my Gatsby site.
I've seen many articles on adding Google fonts to a Gatsby site and most of them seem to use this plugin: gatsby-plugin-prefetch-google-fonts.
I've used the above plugin in my site by adding it in the gatsby-config.js file as:
plugins: [
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Mukta Malar`
},
],
},
}
]
and added the font family to my css file as well:
* {
font-family: "Mukta Malar", sans-serif;
}
But the Google font is not applying to the site. Is there a hidden step that I'm missing in my code?

Answer 1

This plugin seems to be no longer maintained and it's part of escalade monorepo (which throws a 404 error), last commit in the core from 1 year ago.
I would suggest gatsby-plugin-google-fonts that allows you to display: swap your fonts without affecting your performance. In your case:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`mukta malar`
],
display: 'swap'
}
}

Answer 2

Google fonts are available on npmjs.org with the name typeface-XXXXXX representing the name of the font family on the Google fonts website.
If I want to add the Poppins font on my Web site, I just need to add it on the package.json file:
yarn add typeface-poppins
Then in my site, i can use require("typeface-poppin") to use the font:
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
require('typeface-poppins')
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1 style={{fontFamily: "Poppins"}}>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)
export default IndexPage

Answer 3

As other mentioned, include the fonts in your Gatsby project, this will be way faster!
Gatsby has a really great write up about this on their page actually.
https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/
Here is a an example:
First you install the font using npm or yarn:
yarn add #fontsource/mukta-malar // npm install
#fontsource/mukta-malar
Then in your layoutfile for the page, import the font like this:
import "#fontsource/mukta-malar"
You the reference the font in css like you would do it with any google font:
font-family: 'Mukta Malar', sans-serif;
If you only need a few specific weights or variants you can also import only parts of the package like this:
import "#fontsource/mukta-malar/500.css"
this will only load weight 500 aka "medium" weight.