Adding New Fonts in React JS

Creating A React Project

First we should have one React JS Project ,if we don’t have then create new one:

Example-

npx create-react-app my-react-app
cd my-react-app
npm start

note-(npx comes with npm 5.2+ and higher.so in this app we used NPM 5.6.0.
It will generate a react app, name will be my-react-app.And here is the folder structure as follows:

my-react-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Analyse the changes to be

Now we can see that Public folder,so here we are going to add all our new files related to that new fonts with different extensions or type. And we should have all those files in one common folder (like fonts folder we can create and put all the fonts file inside this fonts folder)

Example-

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── fonts(folder which contains all about new fonts)

Now we need to add a style.css file inside our app(Folder)>style.css, which will contain following lines of code and here we are taking example code like how we can add New font (Miriam) in our app .

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── style.css(file adding font)
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js

Inside style.css we can add our new fonts as :

@font-face {
   font-family: 'Miriam';
   font-style: normal;
   font-weight: 400;
   src: url('../../../public/fonts/miriam-libre-v2-latin-regular.eot');
   src: url('../../../public/fonts/Miriam.eot?#iefix') format('embedded-opentype'),
       url('../../../public/fonts/miriam-libre-v2-latin-regular.eot') format('woff2'),
       url('../../../public/fonts/miriam-libre-v2-latin-regular.woff') format('woff'),
       url('../../../public/fonts/miriam-libre-v2-latin-regular.ttf') format('truetype'),
       url('../../../public/fonts/miriam-libre-v2-latin-regular.svg') format('svg');
}

Here,we can see how we are going to add ‘Miriam’ font to our project and inside this file we can change font-style and font-weight also. So for that we need to have basic idea about the files we have in fonts folder(all fonts files). So in fonts folder we have different types of files with their different types of extensions which will support to apply our font on every types of environment and for adding those files for our app we need to give relative path for them also in our style.css file.

Note– Here we can see we have some different types of files with different types of extensions too. So all of these things we will explain once we will define the loader of these files.

Process to add new Font

There are following steps to add new fonts:

Step-1=>

run npm install –save-dev url-loader inside our app to load files related to new font. The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

Step-2=>

Now inside our Webpack.dev.js we need to add following lines of codes:

Inside module.exports>loaders(Array) we need to add our loader to load files for that new font:

Loaders:[
     {
       test: /\.(gif|eot|woff|woff2|ttf|svg)$/,
       loaders: [
         'url-loader'
       ]
     }
]

Description of Loaded Files

This url-loader will load different types of files to add new font about which we are as follows:

Embedded Open Type (EOT) files-
EOT fonts are designed by Microsoft.it is a compact form of Open Type of Fonts. It is designed to use Embedded fonts on Web.

Web Open Font Format (WOFF) files-
WOFF fonts basically support all types of browsers.
Web Open Font Format (WOFF2) files-
WOFF2 is the next generation of WOFF.

TrueType Font (TTF) files-
TrueType Fonts format was developed by Apple and Microsoft as a response to the PostScript font format.

Scalable Vector Graphics font (SVG) files-
SVG fonts are defined using the SVG’s ‘font’ element. In iPhone and iPad we should use SVG fonts.

Conclusion : –

So we have done all about adding new font in our application now we can use our new font(new added) as :
fontFamily:”Miriam”.

NOTE:–
So it was for our entire app but if we want to add new font for a single component then we have to do all the things we have done except that style.css file . Now in this case we will add that style.css file for that component only not for entire app. And rest of steps will be same and we can use that CSS as:
fontFamily:”Miriam”.