CODEWITHSUNDEEP
javascriptcssreactjs
anonymous
anonymous

Reputation: 56

How to use downloaded fonts in react?

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/]
},

Upvotes: 3

Views: 10824

Answers (1)

Vikas Saini
Vikas Saini

Reputation: 486

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'

Upvotes: 2

Related Questions