I have a collection of font files that I want to assign to specific 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;
}
Is it possible to map font-weight to numbers and bold/normal without duplicating the entire font-face block?
Which font types are necessary for web use? Can any be omitted? (eot, woff2, woff, ttf, svg)
Thank you.