Reputation: 35
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
Reputation: 131
Remove the quotes
@font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-ExtraBold.eot");
font-weight: 800;
font-style: normal;
}
Upvotes: -2
Reputation: 724452
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