Bewertung: 5 / 5

 
Letters 1899763

Was sind Font Stacks?

Font Stacks sind eine Lösung in CSS, um alternative Schriften für Websites anzugeben.
Die hier vorgestellten Font Stacks sind systemübergreifende, websichere Lösungen ohne zusätzliche Schriften laden zu müssen. Damit wird Ihre Website schlanker und schneller.


In absteigender Priorität können Sie hier Schriften angeben. Wird die erste Schrift nicht auf dem System des Besuchers gefunden, wird versucht eine nach der anderen zu laden. Ist keine davon vorhanden, wird eine generische Fallback-Schrift genommen, z. B. sans-serif.
Diese letzte Angabe ist wichtig, damit der Browser erkennt, welche installierte Standardschrift er benutzen soll.

Die Links in der CSS-Datei führen zu einer gleichwertigen Ersatzschrift von Google-Fonts.
Oft werden die Font Stacks in der falschen Reihenfolge dargestellt.
Wenn ich z. B. die Schriftart Garamond möchte, muss diese an den Anfang der Liste (links), nicht an das Ende!
Alle folgenden Font Stacks sind systemübergreifend für Windows, Linux und Mac.
Evtl. (Laufweiten-) Unterschiede zwischen den Schriften werden über CSS ausgeglichen.

Aktuell nur für Windows!
Der Name der aktuell vom Browser benutzten Schrift wird, kann an den Beispielen, angezeigt werden.
Die Berechnung dauert einige Sekunden.
Die Anzeige kann aktuell Fehler enthalten.

Systemschrift



font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Einige Systeme (Linux) haben mehrere Schriften davon installiert. Hier kann man die Reihenfolge noch anpassen, je nachdem man welche Schrift bevorzugt.

Beschreibung

system-ui
Eine generische Schriftart, die von verschiedenen Betriebssystemen bereitgestellt wird.
-apple-system
Eine spezielle Schriftart für Apple-Systeme, die in neueren Versionen von macOS und iOS verwendet wird.
BlinkMacSystemFont
Eine generische Schriftart, die auf macOS-Systemen verwendet wird.
"Segoe UI"
Eine Schriftart von Microsoft, die auf Windows-Systemen vorinstalliert ist.
Ab Windows-Vista – davor Tahoma.
Roboto
Eine Schriftart von Google, die für Android-Systeme entwickelt wurde und auch auf vielen Webseiten zu finden ist.
"Noto Sans"
Eine Schriftart von Google, die auf vielen Betriebssystemen verfügbar ist.
Oxygen-Sans
Eine Schriftart, die für die Benutzeroberfläche von KDE entwickelt wurde.
Ubuntu
Eine Schriftart, die speziell für das Betriebssystem Ubuntu Linux entwickelt wurde.
Cantarell
Eine Schriftart, die für die Benutzeroberfläche von GNOME entwickelt wurde.
"Helvetica Neue"
Eine Schriftart von Apple, die auf vielen Apple-Systemen vorinstalliert ist.
sans-serif
Sorgt dafür, dass eine Standardschriftart der Familie Sans-Serif verwendet wird, wenn keine der spezifizierten Schriftarten verfügbar ist.

Serif Schriften

Times New Roman



font-family: Times, "Times New Roman", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Tinos, serif;
Entwurf.

Georgia



font-family: Georgia, _Nimbus-RR, _Liberation-S, Gelasio, serif;

Beschreibung

Gelasio
Eine freie Schriftart. Gelasio hat kompatible Metriken zu Georgia.
Nimbus Roman
Eine Schriftart, die eng mit Times New Roman verwandt ist und auf vielen Linux-Distributionen installiert ist.
Liberation Serif
Eine weitere Schriftart, die von Times New Roman inspiriert ist und auf Linux-Systemen weit verbreitet ist.
serif
Eine generische Schriftfamilie, die eine Standardschriftart der Familie Serif verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Garamond



font-family:  Garamond, "Apple Garamond", "ITC Garamond Narrow", "URW Palladio L", Palatino, Palladio, "EB Garamond", serif;

Beschreibung

Apple Garamond
Eine Schriftart, die von Apple Computer für das Mac OS-Betriebssystem entwickelt wurde. Sie basiert auf der Schriftart Garamond und weist ähnliche Designmerkmale auf.
ITC Garamond Narrow
Eine engere Version von Garamond, die von International Typeface Corporation (ITC) entwickelt wurde.
EB Garamond
Eine freie Garamond-Alternative, die auf den historischen Garamond-Schriften basiert.
URW Palladio L
Eine Schriftart, die von Hermann Zapf entwickelt wurde und von der Schriftart Palatino inspiriert ist. Sie ist eine beliebte Alternative zu Garamond auf Linux-Systemen.
Palatino
Eine Schriftart, die eng mit Garamond verwandt ist und auf vielen Betriebssystemen installiert ist.
Palladio
Eine Schriftart, die eng mit Garamond verwandt ist und auf vielen Betriebssystemen installiert ist.
serif
Eine generische Schriftfamilie, die eine Standardschriftart der Familie Serif verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Sans Serif Schriften

Helvetica



font-family: Helvetica, "Helvetica Neue", Roboto, "Liberation Sans", "DejaVu Sans Condensed", "Nimbus Sans", "Nimbus Sans L", sans-serif;
Entwurf.
Bei Helvetica Schriftstärken unter 400 vermeiden. Auch mit Angaben wie lighter aufpassen.
Das Ergebnis ist auf einigen Systemen kaum lesbar.
Helvetica mit font-weight:200:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Verdana



font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans",  sans-serif;
Entwurf.

Trebuchet



font-family: "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans-serif;
Entwurf.

Impact



font-family: Impact, Haettenschweiler, _Nimbus-BC, _LiberationSansNarrow-B, "Arial Black", Anton, sans-serif;
siehe: Vorgefertigte Klassen.

Beschreibung

Impact
Eine fette, serifenlose Schriftart, die auf vielen Windows- und Mac-Systemen verfügbar ist. Sie eignet sich gut für Überschriften und kurze Texte.
Anton
Eine von Google entwickelte serifenlose Schriftart. Ein guter direkter Ersatz für Impact
Haettenschweiler
Eine von Microsoft entwickelte serifenlose Schriftart, die auf vielen Windows-Systemen verfügbar ist.
"Liberation Sans Narrow Bold"
Eine fette, serifenlose Schriftart von Red Hat, die auf vielen Linux-Systemen verfügbar ist.
NimbusSansL-Bold-Condensed
Eine von Adobe Systems entwickelte serifenlose Schriftart, die auf vielen Linux-Systemen verfügbar ist.
sans-serif
Eine generische Schriftfamilie, die eine Standardschriftart der Familie ohne Serifen verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Monospace

Im Gegensatz zu anderen Font Stacks habe ich diese hier in Schriften mit und ohne Serifen aufgeteilt.
Der Default-Wert bleibt in beiden Fällen allerdings Browser- und Systemabhängig.

Serif



font-family: Courier, "Courier New", "FreeMono", "Nimbus Mono PS", Cousine, monospace;
siehe: Vorgefertigte Klassen.

Beschreibung

Courier
Eine Monospace-Schriftart, die auf vielen Systemen verfügbar ist.
"Courier New"
Eine von Microsoft entwickelte Monospace-Schriftart, die auf vielen Windows-Systemen installiert ist.
"FreeMono"
Eine freie Monospace-Schriftart, die von GNU-Projekten entwickelt wurde und auf vielen Betriebssystemen verfügbar ist.
"Nimbus Mono PS"
Eine PostScript-kompatible Monospace-Schriftart, die auf vielen Linux-Systemen verfügbar ist.
Cousine
Eine von Google entwickelte Monospace-Schriftart, die als Ersatz für Courier New dient.
monospace
Eine generische Schriftfamilie, die eine Standardschriftart der Familie Monospace verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Sans-Serif



font-family: _Consolas, "Lucida Console", "Noto Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;
siehe: Vorgefertigte Klassen.

Beschreibung

Consolas:
Eine moderne, gut lesbare Monospace-Schrift von Microsoft, die auf Windows-Systemen vorinstalliert ist.
Lucida Console:
Eine Monospace-Schriftart von Bigelow & Holmes, speziell für Terminal- und Konsolenanwendungen entwickelt.
Noto Mono:
Eine Schriftart von Google, die eine breite Palette an Zeichen und Sprachen abdeckt, einschließlich Unicode.
Liberation Mono:
Eine Schriftart von Red Hat, die für eine hohe Lesbarkeit auf Bildschirmen optimiert wurde und Standard in vielen Linux-Distributionen ist.
DejaVu Sans Mono:
Eine Schriftart, die auf der Bitstream Vera basiert und eine breite Palette an Zeichen und Sprachen umfasst. DejaVu Sans Mono ist auf vielen Betriebssystemen verfügbar, einschließlich Linux, Windows und macOS.
Monospace:
Eine generische Schriftart-Familie, die als Fallback-Option dient und alle installierten Monospace-Schriftarten auf dem System umfasst.

CSS-Klassen zum direkten Benutzen

Damit Sie nicht den entsprechenden Elementen jedesmal die komplette font-family zuweisen müssen, legen Sie stattdessen CSS-Klassen an.

Das hat mehrere Vorteile:
  • Es vereinfacht die Verwendung,
  • lässt die Seite schneller laden
  • und hält den Quellcode kleiner und übersichtlicher.
Vorgefertige Klassen

  /* www.thorsten-willert.de V1.62 */
.system { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;}
/* ========================================================================== */
.arial { font-family: Arial, FreeSans, "Liberation Sans", Arimo, sans-serif; }
/* Arimo: https://fonts.google.com/specimen/Arimo */

/* ========================================================================== */
.times { font-family: "Times New Roman", Times, Cambria, Tinos, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L", "Nimbus Roman No9 L Regular", serif;}
/* Tinos: https://fonts.google.com/specimen/Tinos */

/* ========================================================================== */
.georgia { font-family: Georgia, Gelasio, _Nimbus-RR, _Liberation-S, serif; }
@font-face {
    font-family:_Nimbus-RR;
    size-adjust: 101.5%;
    src:
		local("Nimbus Roman");
}
@font-face {
    font-family:_Liberation-S;
    size-adjust: 101%;
    src:
    	local("Liberation Serif");
}
/* Gelasio: https://fonts.google.com/specimen/Gelasio */

/* ========================================================================== */
.garamond { font-family:  Garamond, "Apple Garamond", "ITC Garamond Narrow", "EB Garamond", "URW Palladio L", Palatino, Palladio, serif; }
/* https://fonts.google.com/specimen/EB+Garamond */

/* ========================================================================== */
.helvetica { font-family: Helvetica, "Helvetica Neue", "DejaVu Sans Condensed", "Nimbus Sans", "Nimbus Sans L", Roboto, sans-serif; }

/* ========================================================================== */
.verdana { font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;}

/* ========================================================================== */
.trebuchet { font-family: "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans-serif; }

/* ========================================================================== */
.impact { font-family: Impact, Anton, Haettenschweiler, _Helvetica_Compressed, _LiberationSansNarrow-B, _Nimbus-BC, sans-serif;}

@font-face {
    font-family: _LiberationSansNarrow-B;
    font-weight: bold;
    src:
		local("LiberationSansNarrow-Bold"),
		local("Liberation Sans Narrow Bold");
}

@font-face {
    font-family: _Nimbus-BC;
    font-weight: bold;
    src:
		local("Nimbus Sans L Bold Condensed"),
		local("NimbusSansL-Bold-Condensed");
}
/* https://fonts.google.com/specimen/Anton */

/* ========================================================================== */
.monospace-sans { font-family: _Consolas, "Lucida Console", "Noto Mono", "Liberation Mono", "DejaVu Sans Mono", monospace; }
@font-face {
    font-family: _Consolas;
    size-adjust: 108%;
    src:local("Consolas");
}

/* ========================================================================== */
.monospace-serif { font-family: Courier, "Courier New", Cousine, "FreeMono", "Nimbus Mono PS", monospace; }
/* https://fonts.google.com/specimen/Cousine */

Download als CSS-Datei am Ende der Seiten.
Die Listen werden regelmäßig angepaßt.

Mehr zum Thema

Weiterführende Informationen

Rechtliche Informationen

  1. Dejure.org: Urteil zur Nutzung von Google Fonts / LG München I, 20.01.2022 - 3 O 17493/20,
  2. jsDelivr-Blog: Auswirkungen des Urteils des LG München auf jsDelivr
  3. eRecht24: Datenschutzerklärung für Font Awesome

Downloads

css.png CSS - Websichere Font Stacks V1.6      
    Download
 30.06.2022  1.8 KB      90

font.png EB Garamond       
10 Styles + 2 Variable Fonts + Initialen (otf-format, nicht vollständig, nur: ADFGLNOQT).

ttf und woff2

Sparsam beim Drucken

 
  Download
 12.02.2023  4.1 MB  SIL Open Font License link_extern.gif   Georg Duffner    140

font.png Anton       

ttf, eot, woff und woff2

Ersatz für Impact.

 
  Download
 12.02.2023  375.76 KB  SIL Open Font License link_extern.gif   The Anton Project Authors    94