6

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?

Arunster
  • 185
  • 1
  • 8

3 Answers3

6

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'
  }
}
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • It does load the Google font. But there is a flash second when the default font is visible. Is there a way to prefetch the font so that the screen doesn't flicker? – Arunster Aug 13 '20 at 02:45
  • This is because of the `display: swap`. You can change the behavior but this is a way to avoid the render-block. The font is already downloaded but the CSS needs to be parsed either way and the `display: swap`loads don't block the CSS rendering and when the font is parsed, it swaps. Try `display: block` if you want to avoid the flicker. – Ferran Buireu Aug 13 '20 at 04:57
  • 1
    Worked like a charm with display:block. Also learnt about font-display. Thank you! – Arunster Aug 13 '20 at 05:43
3

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
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Raphael Mansuy
  • 213
  • 1
  • 4
  • 10
  • 4
    `typefaces` is deprecated, it is replaced now by `fontsources`: https://github.com/fontsource/fontsource (You even will find a notice at the typefaces webpage): https://github.com/KyleAMathews/typefaces – suther Nov 13 '20 at 16:37
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.
Lars Ejaas
  • 153
  • 9