The Google Fonts docs contain a brief section on how to import a font without code.
Create a React app using npx create-react-app my-app
(docs)
Visit Google Fonts and find a font that suits you.
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');
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.