Font face only working for the first font Vue js

Question

We bought the .otf for various weights (Regular, SemiBold & Bold). But when I include into my Vue project's app.scss with the below syntax only the first font which is mentioned is working. The rest of them are not working.

So as per the below code, I'm only able to use Regular font. But if I move url(../fonts/Gilroy-SemiBold.otf) format("opentype"), as first, I will only be able to use SemiBold.

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../fonts/Gilroy-Regular.otf) format("opentype"),  // font-weight: 400
  url(../fonts/Gilroy-SemiBold.otf) format("opentype"), // font-weight: 600
  url(../fonts/Gilroy-Bold.otf) format("opentype"); // font-weight: 700
}

body {
  overflow-x: hidden;
  font-family: 'Gilroy', sans-serif;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: $text-color;
}

This is very weird, how would I resolve this?

Answer 1

I tried to split the font-face into multiple sections

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../../static/fonts/Gilroy-Regular.otf) format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../../static/fonts/Gilroy-SemiBold.otf) format("opentype"),
  url(../../static/fonts/Gilroy-Bold.otf) format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
  url(../../static/fonts/Gilroy-Bold.otf) format("opentype");
  font-weight: 700;
}

And it worked like a charam!