How to use downloaded fonts in react?

Question

I am facing an issue with custom fonts. I have provided the custom font files (.ttf) in the public folder so that while building the app, all assets are part of the build. What should be the miss? I am not able to find it. I have checked this How can i fix @fontface issue in my react application? solution not working

    @font-face{
      font-family: 'FrutigerLTPro';
      src:url('./fonts/frutiger/FrutigerLTPro-Black.ttf')  format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: auto;
    }
   body {
      font-family: FrutigerLTPro,inherit auto;
    }

webpack:

{
   test: /\.(eot|otf|ttf|woff|woff2)$/,
   use: 'file-loader',
   include: [/fonts/]
},

Try adding `import 'typeface-FrutigerLTPro';` in root file i.e. index.js file — Bhargav Venkatesh, Jan 21 '21 at 04:58

score 2 · Answer 1 · answered Jan 21 '21 at 05:25

2

No separate processor required

step 1 : import fonts in a css file

@font-face {
  font-family: 'Darkenstone';
  src: url('./Darkenstone.woff') format('woff');
}

Step 2:

use standard file loader in webpack

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}

Step 3:

Add the css file in root js file (like app.jsx index.jsx etc etc)

import '../assets/css/fonts.css'

answered Jan 21 '21 at 05:25

Vikas Saini

444
2
11

What is the result? Can you share the error/output/challenge – Vikas Saini Jan 21 '21 at 05:34
there is no error just font doesn't applied – anonymous Jan 21 '21 at 05:47
fonts loaded in browser ? – Vikas Saini Jan 21 '21 at 06:45
So basically the encoding is getting essed up due to webpack processing , please share the webpack , should be a simple fix – Vikas Saini Jan 21 '21 at 06:56

How to use downloaded fonts in react?

1 Answers1