How to add Adobe Fonts to Gatsby

Oscar de la Hera Gomez
Two flowers that represent Adobe Fonts & Gatsby side by side with the text 'Add Adobe Fonts to Gatsby' beneath it.

To add Adobe Fonts (formerly Typekit) to GatsbyJS, add the gatsby-plugin-web-font-loader dependency to your project and implement it in the gatsby-config.js.

The following tutorial builds of our Open Source starter project and walks you through how to add Adobe Fonts to Gatsby.

We recommend downloading our Open Source project, checking out the tutorial/redirects branch and carrying out the changes described below. All relevant changes can be found in the tutorial/adobe-fonts branch.

git clone

Step One: Add the dependency

A screenshot of Terminal showing you how to add the gatsby-plugin-web-font-loader dependency.

In Terminal, in the current directory of the GatsbyJS project, run the following line:

yarn add gatsby-plugin-web-font-loader

Step Two: Add the Environment Variable

A screenshot of VSCode showing our Environment Variables.

In .env, add a new environment variable and set it to the Project ID of your Adobe Fonts Web Project. We recommend using GATSBY_ADOBE_FONT_PROJECT_ID.

The below screenshot of Adobe Fonts shows you where you can find the Project Id. To find it, press Manage Fonts on the top right followed by Web Projects. In this page that appears, you should be able to find all your web projects and their associated Project ID.

A screenshot of Adobe Fonts showing you where to find the Project ID.

Step Three: Update the Gatsby Config

A screenshot of VSCode showing you the updated gatsby-config.js file with the gatsby-plugin-web-font-loader package resolution highlighted.

Update the gatsby-config.js file to include a resolution for the gatsby-plugin-web-font-loader dependency.

Sample code provided below.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details