1

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

Dawe
  • 562
  • 1
  • 9
  • 19
  • 1
    Possible duplicate of [Multiple font-weights, one @font-face query](http://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query) – Vixed Feb 08 '17 at 12:54
  • 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ß Feb 08 '17 at 12:56

1 Answers1

0

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

Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
  • Problem with is that I have to remap 300 to 100, 500 to 300, 700 to 500 etc. – Dawe Feb 08 '17 at 13:29
  • Then you'll have to define it with numbers and make sure that the number notation is used everywhere. I'm pretty sure that you can't override the mapping of the string notation to the number values. – Constantin Groß Feb 08 '17 at 16:09