Die CSS-Eigenschaft font-family definiert eine Auswahl-Rangfolge (en. "font stack") für Schriften. Sie weist den Browser an, die Liste durchzugehen und die erste zur Verfügung stehende Schrift für die Darstellung der Seite zu verwenden.
Das mag zwar auf den ersten Blick komisch sein, macht aber durchaus Sinn, wenn man die Taktik dahinter versteht: Du programmierst eine Website, und die schaut sich der Besucher naturgemäss bei sich auf dem Computer, Smartphone oder Tablet an. Und du kannst niemals mit Sicherheit wissen, welche Schriften dort zur Verfügung stehen werden.
Um nun die Typografie der Website auf allen Ausgabe-Geräten zumindest ähnlich erscheinen zu lassen, bestimmt man als Mitglieder der Schrift-Familie optisch verwandte Schriften, die häufig auf verschiedenen Betriebssystemen installiert sind.
.family1 {
font-family: 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif;
}
.family2 {
font-family: Times, 'Times New Roman', serif;
}Die Familien oben stammen von einem sehr interessanten Blog von Daniel Aleksandersen: "The perfect cross-platform serif and sans-serif font stacks"
Etwas Theorie dazu findest du hier: