How do I add custom fontstyle in react app

Question

I'm new to react js. I just created new React project and now I want to change the default font to my own font files

I want to add my own Fonts file to my React Project, How can I do so?

Answer 1

You can install a webfont loader

If you have yarn

yarn add webfontloader

If you have npm

npm i webfontloader

You can then import it like this:

import WebFont from 'webfontloader';

Then, in your index.js file:

useEffect(() => {
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Chilanka']
    }
  });
 }, []);

and this allows you to use these fonts, like so

.font-loader {
  font-family: 'Chilanka';
}

and then you can use this class wherever you need it.