Google Fonts

The easiest way to add a font to your Reactjs project is through Google Fonts. Just browse/search the desired font and select the styles of the particular font that you want to use.

Once you are done selecting, copy the generated <Link> tag and paste it in the head of your index.html.

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">  
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,100&display=swap" rel="stylesheet">
</head>

Google Fonts is easy, but not all the fonts that we require are available on Google Fonts. If you need to use a font which is not listed in Google Fonts, you can create a font-face from the font files downloaded from the internet.

If the font is not available on Google Fonts

If the required font is not available on Google fonts, we need to generate font-faces from the required font variants manually and include them in the project. But don’t worry. We have online tools to get the job done.

Download the required font(s) from any available resource. Font files of the formats OTF, TTF, WOFF and WOFF2 are recommended for the maximum browser support. When the font files are ready, go to Transfonter.org and click Add fonts to import the downloaded font files to the application. In this example I have imported the regular and the bold variants of the font Roboto.

Then click Convert to generate the javascript-friendly font-face of the required font. Click Download and you’ll be getting a zip file of all the required files. Copy the files and paste them in a new sub directory /fonts in your project. Notice the stylesheet.scss file.

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-bold.woff2') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-regular.woff2') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

Import it in your app.js and you are done.

import 'fonts/stylesheet.scss';

Now you can use the new font in your project.

label.inputLabel{
    font-family: Roboto;
}