@Font-Face with condensed fonts in the same family

Question

I have a number of fonts which fall under the same font family name. I need to generate the @font-face for these fonts

Family Name: Test Pro
Font Name: TestPro-Cond
Font Name: TestPro-CondIt
Font Name: TestPro-It

I understand I can create a @font-face with whatever name I want and reference the font files. However I would like to follow the correct web standard. What I am unsure about is how to handle these 'condensed' fonts. Does anyone have experience with this?

Currently I have

@font-face {
    font-family: "Test Pro Bold Condensed Italic";
    src: url('./fonts/TestPro-BoldCondIt.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Test Pro Bold Italic";
    src: url('./fonts/TestPro-BoldIt.otf');
    font-weight: normal;
    font-style: normal;
}

Not sure if this helps, but google fonts @import does it like this: `@import url(https://fonts.googleapis.com/css?family=Roboto:400,100italic,300,500);` — Lucas M, Nov 24 '15 at 21:27

score 3 · Answer 1 · answered Nov 24 '15 at 21:57

Condensed fonts actually are basically a different family, if you think about it.

What you're doing is fine, but you can simplify the whole tree like this:

@font-face {
    font-family: "Test Pro Condensed";
    src: url('./fonts/TestPro-CondReg.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Test Pro Condensed";
    src: url('./fonts/TestPro-BoldCondIt.otf');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Test Pro";
    src: url('./fonts/TestPro-Reg.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Test Pro";
    src: url('./fonts/TestPro-BoldIt.otf');
    font-weight: bold;
    font-style: italic;
}

And then only worry about using font-family: "Test Pro"; etc in your styles with the appropriate font-weight and font-style to trigger the heavier weight and/or italic version. The browser will automatically simulate any combinations you don't include (though it may look bad.)

Last thing, try to use woff and woff2 for the src if possible, the file size is much smaller.

score 1 · Answer 2 · answered Feb 15 '18 at 15:38

1

It should be possible using the css property called font-stretch, but at the time of writing it's not covered in all major browsers.

See https://caniuse.com/#feat=css-font-stretch

answered Feb 15 '18 at 15:38

Adam Gerthel

663
3
9
24

@Font-Face with condensed fonts in the same family

2 Answers2