CODEWITHSUNDEEP
cssfont-face
kknopper
kknopper

Reputation: 35

Setting a single css font-family with multiple weights

I'm trying to create a font-family in css like so:

(I have multiple font sources per font for different browsers but didnt want to put them all in here)

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Thin.eot");
  font-weight: "100";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraLight.eot");
  font-weight: "200";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Light.eot");
  font-weight: "300";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.eot");
  font-weight: "normal";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.eot");
  font-weight: "500";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBild.eot");
  font-weight: "600";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.eot");
  font-weight: "bold";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.eot");
  font-weight: "800";
  font-style: "normal";
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.eot");
  font-weight: "900";
  font-style: "normal";
}

My browser is only rendering out the last file, Montserrat-Black, even when I specifically set the font weights on different elements. As far as I am aware you could declare the same font-family with different weights. Anyone know why this would be happening?

Upvotes: 2

Views: 1385

Answers (2)

Malcolm Vaz
Malcolm Vaz

Reputation: 131

Remove the quotes 

@font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-ExtraBold.eot");
font-weight: 800;
font-style: normal;
}

Upvotes: -2

BoltClock
BoltClock

Reputation: 724482

Your font-weight and font-style descriptor values are all quoted strings. That's not correct. They are numbers and keywords respectively, which means the quotes are not supposed to be there.

The reason why the Black weight is being selected is because, since your font-weight and font-style descriptors are all invalid, every single @font-face rule is pointing to the same weight and style (normal), causing the last of these rules to override all of the rest. And since there are no other known weights for this font family (since the descriptors are all invalid), the Black weight is used regardless of the value of font-weight that you set on your elements.

Upvotes: 4

Related Questions