Letztens bin ich gerade auf ein Safari Phänomen gestoßen. Heutzutage werden gerne Webfonts für Webseiten verwendet. Häufig werden hierfür Google Fonts verwendet. Diese sind kostenlos und können einfach eingebunden werden. 

Soweit so gut. In einem aktuellen Projekt hatte ich allerdings das Problem das die Font teilweise nicht dargestellt werden, anstelle der gewünschten Schriftart wurde stattdessen der Fallback (in meinem Fall, die erste serife Schrift) verwendet. 

Das Problem

OK, was das Problem genau ist kann ich nicht wirklich eingrenzen, ich kann eigentlich nur die Lösung posten. Auf alle Fälle reicht es nicht wenn nur die Schriftart ausgetauscht wird, es müssen ebenfalls font-weight sowie font-style angegeben werden. Vererbung klappt hier also nicht.

Die Lösung

Scheinbar ist es erforderlich, dass nicht nur die Schriftart ausgetauscht werden kann, sondern es müssen ebenfalls font-weight sowie font-style angegeben werden. In meinem Fall hat zB folgender CSS Code zu Problemen geführt:

h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-style: italic;
  font-weight: 700
}

h2.entry-title {
  font-family: "Merriweather", serif;
}

Im oben genannten Beispiel wurde anstelle von Merriweather einfach Times-New-Roman angezeigt. Nachdem ich folgender Ergänzung hat es dann auch mit Safari funktioniert.

h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-style: italic;
  font-weight: 700
}

h2.entry-title {
  font-family: "Merriweather", serif;
  font-style: italic;
  font-weight: 700;
}