Why doesn't Firefox "see" the Roboto font?

Question

css

Good afternoon!
After testing the project in FF, a problem was found - Roboto fonts are not displayed.
I would even say that they are displayed, but they look ugly:

Font-face section:

@font-face {
  font-family: "RobotoRegular";
  src: url("../fonts/RobotoRegular/RobotoRegular.eot");
  src: url("../fonts/RobotoRegular/RobotoRegular.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoRegular/RobotoRegular.woff") format("woff"),
  url("../fonts/RobotoRegular/RobotoRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "RobotoLight"; */
@font-face {
  font-family: "RobotoLight";
  src: url("../fonts/RobotoLight/RobotoLight.eot");
  src: url("../fonts/RobotoLight/RobotoLight.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoLight/RobotoLight.woff") format("woff"),
  url("../fonts/RobotoLight/RobotoLight.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "RobotoMedium"; */
@font-face {
  font-family: "RobotoMedium";
  src: url("../fonts/RobotoMedium/RobotoMedium.eot");
  src: url("../fonts/RobotoMedium/RobotoMedium.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoMedium/RobotoMedium.woff") format("woff"),
  url("../fonts/RobotoMedium/RobotoMedium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "RobotoBold"; */
@font-face {
  font-family: "RobotoBold";
  src: url("../fonts/RobotoBold/RobotoBold.eot");
  src: url("../fonts/RobotoBold/RobotoBold.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoBold/RobotoBold.woff") format("woff"),
  url("../fonts/RobotoBold/RobotoBold.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "NautilusPompiliusRegular"; */
@font-face {
  font-family: "NautilusPompiliusRegular";
  src: url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.eot");
  src: url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.eot?#iefix")format("embedded-opentype"),
  url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.woff") format("woff"),
  url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "RobotoCondensedRegular"; */
@font-face {
  font-family: "RobotoCondensedRegular";
  src: url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.eot");
  src: url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.woff") format("woff"),
  url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "RobotoCondensedLight"; */
@font-face {
  font-family: "RobotoCondensedLight";
  src: url("../fonts/RobotoCondensedLight/RobotoCondensedLight.eot");
  src: url("../fonts/RobotoCondensedLight/RobotoCondensedLight.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoCondensedLight/RobotoCondensedLight.woff") format("woff"),
  url("../fonts/RobotoCondensedLight/RobotoCondensedLight.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "RobotoCondensedBold"; */
@font-face {
  font-family: "RobotoCondensedBold";
  src: url("../fonts/RobotoCondensedBold/RobotoCondensedBold.eot");
  src: url("../fonts/RobotoCondensedBold/RobotoCondensedBold.eot?#iefix")format("embedded-opentype"),
  url("../fonts/RobotoCondensedBold/RobotoCondensedBold.woff") format("woff"),
  url("../fonts/RobotoCondensedBold/RobotoCondensedBold.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

I will be grateful for the answer and help.

Answer 1

Better add fonts like this:

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
           url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
}

If you need to add bold, then you change the url and font-weight, but leave the name too.

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
           url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-bold.woff2') format('woff2'),
           url('Roboto-bold.woff') format('woff');
    font-weight: bold;
}

Well, in the styles themselves you write like this

// Если нужен bold
h1 {
    font-family: Roboto;
    font-weight: bold;
}
// Если нужен Regular
h1 {
    font-family: Roboto;
    font-weight: normal; // Либо можно не писать т.к. по умолчанию стоит
}

Actually, you can remove all other formats except woff and woff2. You can also add ttf if you need support for older Androids.
Here's woff cross-browser compatibility caniuse.com/#feat=woff
If you really need ie8, then you can also connect eot, but it's hardly worth it.
Other formats are also included in src separated by commas after the last ; Do not forget.
Here you can read more about connecting
nicothin.pro/page/web-fonts
woff2 I took it here
https://github.com/FontFaceKit/roboto

Answer 2

Sounds like saturation issues. It is possible that saturations other than normal are specified in css below, and the browser adjusts itself. Try to connect the font correctly, ie. specifying a single name for all styles, but corresponding font-weight.

@font-face {
  font-family: "Roboto";     // <--
  src: url("../fonts/RobotoRegular/RobotoRegular.eot");
  ...
  font-style: normal;
  font-weight: normal;     // <--
}
@font-face {
  font-family: "Roboto";     // <--
  src: url("../fonts/RobotoLight/RobotoLight.eot");
  ...
  font-style: normal;
  font-weight: 300;     // <--
}