

In this article, you were introduced to three different approaches for loading fonts onto a project: Typography.js, Fontsource, and managing self-hosted files manually.įinding the right solution for your needs can significantly improve performance and user experience.Ĭontinue your learning with How To Deploy a Gatsby Application to DigitalOcean App Platform.Evoking the nostalgia of a certain era is an awesome way to throw a party. Src/components/layout.js import Īnd now you can call your fonts in the same way you did in the previous Fontsource example - via a stylesheet or styled-component.

npm install typography react-typography gatsby-plugin-typography.Open your terminal window and navigate to your project directory and run the following command: Gatsby-plugin-typography will need to also include peer-dependencies of typography and react-typography. Typography.js is a toolkit for loading and configuring web fonts for your projects. The Fontsource section was verified with v4.2.2.

The Typography,js section was verified with gatsby-plugin-typography v3.2.0, react-typography v0.16.19, typography v0.16.19, and typography-theme-lawton v0.16.19. This tutorial was verified with Node v15.13.0, npm v7.8.0, gatsby v3.2.1, and react v17.0.1. The Gatsby started created in How To Set Up Your First Gatsby Website satisfies this requirement.
