multiple files for multiple font-weight with @font-face

Question

I have multiple font files and I need it to map it to some font weights.

@font-face {
    font-family: "custom-font";
    src: url("font300.eot");
    src: url("font300.eot?#iefix") format("embedded-opentype"),
        url("font300.woff2") format("woff2"),
        url("font300.woff") format("woff"),
        url("font300.ttf") format("truetype"),
        url("font300.svg#font-300") format("svg");
    font-weight: 300, normal;
    font-style: normal;
}

@font-face {
    font-family: "custom-font";
    src: url("font500.eot");
    src: url("font500.eot?#iefix") format("embedded-opentype"),
        url("font500.woff2") format("woff2"),
        url("font500.woff") format("woff"),
        url("font500.ttf") format("truetype"),
        url("font500.svg#font500") format("svg");
    font-weight: 500, bold;
    font-style: normal;
}

I need to map font-weight to number and bold/normal, is it possible? This is not working. I do not wanna to duplicate whole font-face block.

Which font typer are needed for the web? Can I ommit some? (eot, woff2, woff, ttf, svg)

thank you

Possible duplicate of Multiple font-weights, one @font-face query — Vixed
Not exactly a duplicate. as far as I understand, the OP doesn't want to add the same font file to different weights, but just wants to support the numeric and the string notation of the weight — Constantin Groß

Constantin Groß Constantin Groß · Accepted Answer · 2017-02-08T12:52:46

No need to do that, the font-weight values automatically resolve to the corresponding numbers, see https://developer.mozilla.org/de/docs/Web/CSS/font-weight So just make the rule for either the number or the shorthand.

Font types depend on which clients you want to support. For the support of each of the formats, see:

EOT: http://caniuse.com/#feat=eot

WOFF: http://caniuse.com/#feat=woff

WOFF2: http://caniuse.com/#feat=woff2

SVG: http://caniuse.com/#feat=svg-fonts

TTF/OTF: http://caniuse.com/#feat=ttf

multiple files for multiple font-weight with @font-face

1 Answers