Sass
Adding custom fonts in Reactjs.
May 15, 2020
1 min

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.

Google Fonts - Select styles
Google Fonts - Select styles

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

Google Fonts - Copy Link tag
Google Fonts - Copy Link tag
<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.

Generating font-face
Generating font-face

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;
}

Tags

custom fontsfonts not in googlereactsass

Related Posts

Sass
Creating a pure-CSS progressbar in React.
July 05, 2020
1 min
React JS
How to add TinyMCE as Rich Text Editor in your React project
May 15, 2021
1 min