Problem with changing font-weight on imported fonts

Question

I got a problem with setting up font-weight. I tried different settings to change FuturaPT: normal, light, bold but it notching changes:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@font-face {
  font-family: "FuturaPT";
  src: url("Fonts/FuturaPTLight.otf");
  src: url("Fonts/FuturaPTMedium.otf");
  src: url("Fonts/FuturaPTDemi.otf");
}

html {
  background-color: #f3f3f3;
}
body {
  font-family: "FuturaPT", "Roboto", sans-serif;
}
.text--main__1 {
  font-size: 1.875rem;
  font-weight: light;
  letter-spacing: 1.5px;
}
.text--main__2 {
  font-size: 16px;
}

Answer 1

First of all, don't import Roboto if you don't need it, and then change your code in :

@font-face {
  font-family: "FuturaPT";
  src: url("Fonts/FuturaPTMedium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FuturaPT";
  src: url("Fonts/FuturaPTLight.otf") format("opentype");
  font-weight: light;
  font-style: normal;
}