Cover Image

Contents

Steps

The Google Fonts docs contain a brief section on how to import a font without code.

1. Create React App

Create a React app using npx create-react-app my-app (docs)

2. Find Your Font

Visit Google Fonts and find a font that suits you.

3. Import The Font

At the top of index.css, add an @import statement for the font you chose in step 2:

@import url('https://fonts.googleapis.com/css?family=Sixtyfour');

If the font you found has a space in it, like Poor Story, you’ll need to replace the space with a ”+” like this:

@import url('https://fonts.googleapis.com/css?family=Poor+Story');

4. Add The Font-Family

The last step is to add the font-family property to one of the tag bodies in index.css. Ideally, add it to head or body so it is applied everywhere:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css?family=Sixtyfour');

html {
  font-family: 'Sixtyfour';
  background-size: 224px;
  @apply text-slate-200;
  @apply bg-slate-950;
}


body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

The family name in the URL is what you will put in the CSS code block. This value is case insensitive.

Poor Story Font