@font-face multiple font-families (name aliases)

Question

I have a font file which contains a font named as "Whitney SSm A" and I'm using this name in my CSS. But I also need it to have an alternative name "Whitney-Medium", because such name is coming from a theme files (from the server) that we use. So both names should be kept.

Currently it is declared like so:

@font-face {
  font-family: "Whitney SSm A";
  src: url(data:application/x-font-woff;base64,...);
  font-weight: 500;
  font-style: normal;
}

I tried to adjust the font-family to "Whitney SSm A", Whitney-Medium; but it's not working that way.

Is there any other way except duplicating the entire @font-face? Would be super cool if it would be possible to do without touching that font file, because I may break license.

Answer 1

You need separate font-face declarations for each named font:

// Whitney SSm A
@font-face {
  font-family: "Whitney SSm A";
  src: url(data:application/x-font-woff;base64,...);
  font-weight: 500;
  font-style: normal;
}

// Whitney-Medium
@font-face {
  font-family: " Whitney-Medium";
  src: url(data:application/x-font-woff;base64,...);
  font-weight: 700;
  font-style: normal;
}