Using specific instance for @font-face in TTF file containing multiple instance

First of all I have no idea how TTF files are organized so I might have some of my terminology wrong here.

I have a stylesheet with a @font-face that references a single TTF file that has multiple faces in it. In the Windows font viewer it looks like this if I cycle through "next" (sorry, GIF got messy, picked bad encoding parameters, didn't feel like redoing it, but you get the drift):

The file has a .ttf extension although I'm not sure what the relationship is to OpenType (it says "OpenType" in that window).

Anyways, I reference it like this in the stylesheet:

@font-face {    font-family: TestFont;    src: url(...) format('truetype');  }    :root {    font-family: TestFont;  }  

So, the font name in the file is "Bahnschrift", and the face I want to use is "Bahnschrift Condensed". The above almost works except it uses the base "Bahnschrift" font.

My question is: How do I specify that I want to use the "condensed" variant instead?.

Here's a fiddle. I wanted to embed the font as a data URI just for this post, but it was too large to post here (about 500kB encoded) so it's here instead: https://jsfiddle.net/qugoeam5/

https://stackoverflow.com/questions/67358267/using-specific-instance-for-font-face-in-ttf-file-containing-multiple-instance May 02, 2021 at 11:45PM