---
title: "Discussion on \"The best way to load and use Google Fonts with React, Gatsby and NextJS\" | Hashnode"
description: "Discussion on \"The best way to load and use Google Fonts with React, Gatsby and NextJS\". Google Fonts are amazing and widely popular on the Internet. Its API makes up 89.28% of the web fonts market share (see source). However, I often noticed that many websites struggle with fetching their fonts and end up render-blocking their website b..."
url: "https://hashnode.com/posts/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs/602ced8eeea87c13a293e344"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [The best way to load and use Google Fonts with React, Gatsby and NextJS](https://blog.larsbehrenberg.com/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs?utm_source=hashnode&utm_medium=feed)

Google Fonts are amazing and widely popular on the Internet. Its API makes up 89.28% of the web fonts market share (see source). However, I often noticed that many websites struggle with fetching their fonts and end up render-blocking their website b...

Feb 17, 2021 · 5 min read · blog.larsbehrenberg.com  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#web-development](https://hashnode.com/tag/web-development)
-   [#google](https://hashnode.com/tag/google)
-   [#frontend-development](https://hashnode.com/tag/frontend-development)
-   [#nextjs](https://hashnode.com/tag/nextjs)

## Written by

[Lars Behrenberg](https://hashnode.com/@larsbe)

@larsbe · Nagano, Japan

  
[View profile](https://hashnode.com/@larsbe)

Freelance Web Developer 💻 | Always Learning 📖 | Currently Working Mostly In Gatsby 💥

## Responses 2

Markdown supported · ⌘↵ to post

[Olanrewaju Alaba](https://hashnode.com/@chryzcode)

[Feb 18, 2021](https://hashnode.com/posts/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs/602ced8eeea87c13a293e344/comment/602e5811bfecab23c35244ee)

Nice blog, Lars Behrenberg !

I also love your website, it's cool.

[Lars Behrenberg](https://hashnode.com/@larsbe)

[Feb 18, 2021](https://hashnode.com/posts/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs/602ced8eeea87c13a293e344/comment/602e5811bfecab23c35244ee#reply-602e59de1591c5239ebdb564)

Thanks heaps! 😬😅

[Olanrewaju Alaba](https://hashnode.com/@chryzcode)

[Feb 18, 2021](https://hashnode.com/posts/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs/602ced8eeea87c13a293e344/comment/602e5811bfecab23c35244ee#reply-602e5a531591c5239ebdb56b)

I would make a share of this blog on twitter [Lars Behrenberg](https://hashnode.com/@larsbe)

[Pankaj Patel](https://hashnode.com/@pankajpatel)

[Feb 18, 2021](https://hashnode.com/posts/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs/602ced8eeea87c13a293e344/comment/602e3a4e5138601f194c291e)

Thanks for writing about Fontsource

Though wouldn't it still be a dependency to download, no matter where it comes from?

Loading from google at-least has its CDN.

What do you think?

[Lars Behrenberg](https://hashnode.com/@larsbe)

[Feb 18, 2021](https://hashnode.com/posts/the-best-way-to-load-and-use-google-fonts-with-react-gatsby-and-nextjs/602ced8eeea87c13a293e344/comment/602e3a4e5138601f194c291e#reply-602e51b1e9e63c21ad671e89)

It’s still true that the font has to be loaded in. However, because you are self-hosting the font through an npm package, you are not sending a rending blocking network request to the Google font api. Waiting for a api to reply will always take longer than have assets self-host the assets yourself. And that’s why you end up having significant performance gains.