如何将本地/自定义 fonts 添加到反应 js 项目？

Question

I want to add some custom / local fonts to my react project, can anyone tell me the method to use it inside react project?

Below I have added some ss of my code which is not working.

index.js

index.css

app.scss

Thanks

Answer 1

You import the bold font in your index.js but you set the book font in your App.scss . Also try to add !important when setting the font-family on the body:

html,
body {
  font-family: "CooperHewitt-Bold" !important;
}

Using @font-face :

/* index.css */ 
@font-face {
  font-family: "CooperHewitt-Bold";
  src: local("CooperHewitt-Bold"),
    url(./fonts/CooperHewitt-Bold.otf) format("opentype");
}

Make sure to import index.css inside index.js :

import './index.css';
// ...