CSS @font-face Only Loading 2 Font-Weights

user_8421671 0
Viewed 93

I'm trying to use the following CSS that adds a font family with six different font-weights.

@font-face { font-family: myFont; font-weight: Thin; src: url('../fonts/myFont-Thin.ttf'); }
@font-face { font-family: myFont; font-weight: Light; src: url('../fonts/myFont-Light.ttf'); }
@font-face { font-family: myFont; font-weight: Medium; src: url('../fonts/myFont-Medium.ttf'); }
@font-face { font-family: myFont; font-weight: Regular; src: url('../fonts/myFont-Regular.ttf'); }
@font-face { font-family: myFont; font-weight: Bold; src: url('../fonts/myFont-Bold.ttf'); }
@font-face { font-family: myFont; font-weight: Black; src: url('../fonts/myFont-Black.ttf'); }

.myClass{
    font-family: myFont, sans-serif;
    font-weight: Medium;
}

When I try to use the class myClass, it uses the myFont-Bold.ttf with a font-weight of 400 instead of using the myFont-Medium.ttf with a font-weight of 400. Inside of the developer tools, I'm able to see it's only loaded two font-weights of my font: Bold and Black. When I delete the line for the black font-weight, it then loads in Regular and Bold. Why is it only loading two font-weights instead of all of them?

font-face fonts css
1 Answers

You're using invalid font-weight keywords. (See MDN: font-weight)

Style names like "light" or "medium" are commonly used in desktop environments (e.g using a graphic application) – these style names are actually stored in a font file (at least in formats like truetype/ttf).

However, browsers can't use these internally stored style names and need an explicit style/weight mapping like so:

@font-face {
  font-family: myFont;
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/myFont-Light.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/myFont-Black.ttf") format('truetype');
}

body {
  font-family: myFont, sans-serif;
}

.thin {
  font-weight: 100;
}

.medium {
  font-weight: 500;
}

.black {
  font-weight: 900;
}

I strongly recommend using numeric font-weight values for better compatibility as well as specifying the format like format('truetype')

You should also include a font-style to map normal and italic styles.

user_150156750
Related