Home

Extend

Hashnode Pro
Hashnode for Agents

Resources

The foreword
Hashnode gql skill

Buildful - AI coding agent that delivers frontier-level results at a fraction of the cost Bug0 - The AI-native e2e QA regression testing Hackathons Changelog Brand @hashnode on X Hashnode on LinkedIn Support - hello+support@hashnode.com Code of Conduct Terms Privacy Sitemap

Search Hashnode

Search posts, tags, users, and pages

Discussion on "The best way to load and use Google Fonts with React, Gatsby and NextJS" | Hashnode

Feed/

Discussion

Lars Behrenberg

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

Feb 17, 2021

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...

blog.larsbehrenberg.com5 min read

#reactjs #web-development #google #frontend-development #nextjs

Responses2

Markdown supported · ⌘↵ to post

Olanrewaju Alaba

Software Engineer || Technical Writer

Feb 18, 2021

Nice blog, Lars Behrenberg !

I also love your website, it's cool.

Thanks heaps! 😬😅

Lars Behrenberg

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

Feb 18, 2021

Olanrewaju Alaba

Software Engineer || Technical Writer

Feb 18, 2021

I would make a share of this blog on twitter Lars Behrenberg

Pankaj Patel

Blog, Tech, Photography etc.

Feb 18, 2021

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

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

Feb 18, 2021

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.