Font is loaded but not applicated

Question

I use the Roboto font in my React project and I have a strange problem, when I access my application locally the font is not applied to my texts, however if I open the element inspector and I uncheck and recheck a css property (no matter which one) the font is applied everywhere!

I use scss files with node-sass and my font is local and defined using @font-face

Here is the .scss file for the font

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

I import all my .scss file into a main.scss file and I import this file to my App.js. Everything related to css is working fine except the font :(

Has anyone experienced a similar problem? I also use a font for icons and it works perfectly

Thanks in advance !

Answer 1

The solution is to not use "font-display: optional" ...