javascript - How to use downloaded fonts in react? - Stack Overflow

admin管理员组

文章数量:1426957

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

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

• javascript
• css
• reactjs

Share Improve this question Follow asked Jan 21, 2021 at 4:52 anonymousanonymous 5611 gold badge22 silver badges55 bronze badges 3

• Try adding import 'typeface-FrutigerLTPro'; in root file i.e. index.js file – Bhargav Venkatesh Commented Jan 21, 2021 at 4:58
• tried not working – anonymous Commented Jan 21, 2021 at 5:01
• stackoverflow./a/54860620/10295470 – Bhargav Venkatesh Commented Jan 21, 2021 at 5:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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'

本文标签： javascriptHow to use downloaded fonts in reactStack Overflow