Seltsames Phänomen bei dem ein Font nicht angenommen wird

[Gunnar Bittersmann]

@@einsiedler

Das bedeutet also so:

@font-face {
    font-family: 'Variable-Bold';
    src: local('Bauhaus 93');
    src: url('../web-fonts/Variable/Variable-Bold.eot'),
        url('../web-fonts/Variable/Variable-Bold.eot?#iefix') format('embedded-opentype'),
        url('../web-fonts/Variable/Variable-Bold.woff') format('woff'),
        url('../web-fonts/Variable/Variable-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

zum Beispiel...

Richtig?

Nein, in mehrerer Hinsicht nicht. Zum einen nicht eben nicht local, sondern:

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

body
{
  font-family: Bauhaus 93, Variable, …;
}

(mal angenommen, die Schriftart heißt lokal „Bauhaus 93“).

Die Schriftfamilie sollte Variable benannt werden, nicht Variable-Bold. Die einzelnen Schriftschnitte werden durch die verschiedenen Werte für font-weight und font-style unterschieden:

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

EOT und TTF sind Relikte aus längst vergangenen Zeiten. Weglassen! Als Format brauchst du einzig WOFF und möglichst auch WOFF2 (besser komprimiert) – letzteres zuerst, also:

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Regular.woff2') format('woff2'),
    url('../web-fonts/Variable/Variable-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

LLAP 🖖