How to add fonts to a React app
In this tutorial, we will learn how to add fonts to the react projects which are created using the create-react-app CLI.
Adding local fonts
-
Create a new folder called
fonts
in yoursrc
folder. -
Download the fonts locally and place them inside the
fonts
folder. -
Open your
index.css
file and include the font by referencing the path.
@font-face {
font-family: 'Rajdhani';
src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');}
Here I added a Rajdhani
font.
Now, we can use our font in css classes like this.
.title{
font-family: Rajdhani, serif;
color: #0004;
}
Adding Google fonts
If you like to use google fonts (api) instead of local fonts, you can add it like this.
Example:
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');
Similarly, we can also add it inside the index.html
file using link
tag.
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">