Testing different fonts in a React project

Question

How to quickly test different fonts in a React project?

Overview

I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:

body
  font-family: Roboto, Helvetica, Arial, sans-serif
  font-size: 16px

Desired outcome

I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.

For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.

What have I looked at?

I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.

I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how. Thanks for any help showing how I should approach this.

Solution

Let me kick my answer off with a warning:

Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.

Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic @font-face declarations, or Kyle Matthew's typefaces packages, for example.

Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.

1. Get a link to embed your fonts client-side

First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:

https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat

2. Embed the fonts on your Gatsby site

To embed the link on your Gatsby site, you have two choices:

using <link>

You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.

In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
```
<HelmetDatoCms
  favicon={data.datoCmsSite.faviconMetaTags}
  seo={data.datoCmsHome.seoMetaTags}
>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
```
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using @import

You can import a remote font in CSS (or SASS):
```
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
```
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.

In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.

3. Use the fonts in your CSS

Third, no matter if you chose the <link> or the @import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.

You'll want something like this:

body {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-family: 'Great Vibes', cursive;
}