We need to install webpack loaders. Hjs-webpack is already configured to use the loaders but you can choose whether to use them or not. You can use npm install if you want to choose what is to be installed. When using npm always install loader with –save-dev and not –save.

Create folder structure. You may already have an src folder in the root of your project. Your main React app component is in arc/App.jsx. Now create two directories fonts and styles. You can download font files and extract the files to src/assets/fonts. You have to import global styles using loaders now. Create a file named global.css and paste the below code.

  
  

 @font-face { 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans'), local('OpenSans'),
       url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers *
       url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */ 
       url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ 
       url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */  
}
body {
 font-family: 'Open Sans'; 
} 
 

This code applies a new font that is defined to the body tag of Your application. Now edit the App.jsx and import  global.css.

import globalStyles from '../assets/global.css';