Using Web Fonts
This guide covers how to add fonts from web services to your Gatsby site.
- 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.
- Install the plugin and its peerDependencies:
- Add the plugin to your
- 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.
npm install @fontsource/open-sansto install the necessary package files.
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
- Once it’s imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.