Using Web Fonts

This guide covers how to add fonts from web services to your Gatsby site.

Prerequisites

• A Gatsby project set up. (Need help creating one? Follow the Quick Start)

Using Google Fonts

There are different ways of adding web fonts like Google Fonts to Gatsby, in this guide you’ll use the recommended gatsby-omni-font-loader. As in the self-hosting example below you’ll add the Open Sans font.

1. Install the plugin and its peerDependencies:

2. Add the plugin to your gatsby-config.js:

3. You can now reference the font in your CSS:

Self-host Google Fonts with Fontsource

Fontsource is a project to provide open source fonts from Google Fonts as NPM Packages.

You can decrease your site’s loading time by self-hosting fonts, saving ~300 milliseconds on desktop to 1+ seconds on 3G connections.

This example shows how to install the Open Sans font. If you have a different Google Font you want to use, you can find the corresponding package in NPM or the Fontsource Font Preview Website.

1. Run npm install @fontsource/open-sans to install the necessary package files.

2. Then within your app entry file or site component, import the font package. It is recommended you import in your site’s gatsby-browser.js file.

If you wish to select a particular weight or style, you may specify it by changing the import path.

Please note: The weights and styles a font includes is shown in each package’s README file.

3. Once it’s imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.