font-weight is not working properly?

by

font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.

For example, if I embed the following font…

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.

If you want additional weights, you need to specify them in separate @font-face declarations with those additional weights, like this.

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

Usually each weight will have a separate font file the browser will need to download, unless you’re using variable width fonts.

Leave a Comment