React JS add local font

Question

I want to add a custom font which is in my local machine, I added the font in the src/fonts/ the font file itself is named DIN Next LT Arabic Regular.ttf.

I found one of the answers suggested that I should put it that way and add this line to my index.css file

@font-face {
  font-family: 'DIN Next LT Arabic Regular' !important;
  src: local('DIN Next LT Arabic Regular'), url('./fonts/DIN Next LT Arabic Regular.ttf') format('truetype');
}

and then import the index.css to my index.js which was already done by the create-react-app command.

But it's not working, and I have no clue why.

PS: I have a .env file which contains this line NODE_PATH=src/ to not use relative path.

Answer 1

You can use "Web Font Loader" to import font in your react-app, so you can install this tool use

npm install webfontloader --save

This is just an example:

1- In your public/index.html copy the link of the font

2- Then open src/index.js and add:

import WebFont from 'webfontloader';

  WebFont.load({

    google: {
      families: ['Droid Sans', 'Droid Serif']

     }});

Answer 2

This issue might stem from support and / or compatibility issues (I.E: what works on browser x might not work on browser y).

What if the browser you're using doesn't support that particular font format?

While I would normally recommend that you use a (free) service like Google Fonts to get your fonts, there are times when you need to host and load your own custom fonts so I think you would be better off using FontSquirrel's Web-Font Generator, it's a service that allows you to upload a .ttf file and create a webfont package (a .zip folder that contains all the different font formats).

It also supplies you with a CSS file that (properly) links all the different font formats, ensuring you have proper support, you can find out more about Font Squirrel at their blog.

NOTE: I'm not associated with and don't work for Google Fonts or Font Squirrel, just a satisfied user of both services.