1

In my react project created using create-react-app, I put a font file called CaviarDreams.ttf inside my /asset folder.

In the default index.css file, I did like this:

@font-face {
  font-family: 'CaviarDreams';
  src: url('assets/CaviarDreams.ttf') format('truetype'),
}

body {
  margin: 0;
  font-family: "CaviarDreams";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #f2f2f2;
}

However, the font doesn't change at all. I also tried in the App.css, but it's still the same.

Am I doing something wrong?

Dawn17
  • 7,825
  • 16
  • 57
  • 118

1 Answers1

0

ttf format doesnt support 100% for the Web.

You have to convert the desktop fonts to web fonts before use in Web.

Try - https://www.fontsquirrel.com/tools/webfont-generator (Online Webfont Generator)

and download the web fonts and add the css accordingly.

Thilanka De Silva
  • 1,088
  • 13
  • 15