How To Add Custom Fonts to Gatsby

Learn how to load and use custom fonts in Gatsby.js using three different approaches: Typography.js, Fontsource, and managing self-hosted files manually.

Learn how to load and use custom fonts in Gatsby.js using three different approaches: Typography.js, Fontsource, and managing self-hosted files manually.

Choosing the right font can add great value to a site and enhance the user experience. The right font-loading strategy, however, can be somewhat of a challenge. That’s why Gatsby provides several developer-friendly solutions for all of your font-loading needs.

In this article, you will be introduced to three different approaches for loading fonts onto a project: Typography.js, Fontsource, and managing self-hosted files manually.

gatsby

Custom Gatsby Home Page Component | Gatsby wordpress themes, codeytek, gatsby themes, gatsby wordpress tutorial, gatsby + wordpress plugin, gatsby build, blank gatsby template, wordpress gatsby preview, gatsby resume template, Imran Sayed

Adding Transformer Sharp Images in Gatsby | gatsby-plugin-sharp, Gatsby WordPress Images, Gatsby WordPress Featured Image, codeytek | gatsby gutenberg | gatsby wordpress graphql .

Custom Gatsby Home Page Component | Gatsby wordpress themes, codeytek, gatsby themes, gatsby wordpress tutorial, gatsby + wordpress plugin, gatsby build, blank gatsby template, wordpress gatsby preview, gatsby resume template, Imran Sayed

Using Sass in Gatsby + WordPress | gatsby-plugin-sass, gatsby scss fonts, css modules gatsby, codeytek | decoupled

Jason Lengstorf, Head of DevRel at Gatsby, gives an overview of Gatsby including what it is, how it works, and why it matters.