Thorsten H. Willert

CSS - Font Stacks

Details
 
Letters 1899763

Was sind Font Stacks?

Font Stacks sind eine Lösung in CSS um alternative Schriften für Websites anzugeben,
Die hier vorgesellten 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 gleichwertige 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.

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.

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;

Garamond 



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

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 meistens 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.

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.

Sans-Serif 



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

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      34

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

ttf und woff2
Sparsam beim Drucken 		   Download
 25.08.2022  4.1 MB  SIL Open Font License link_extern.gif   Georg Duffner    73

font.png Anton       
ttf, eot, woff und woff2    Download
 02.07.2022  375.76 KB  SIL Open Font License link_extern.gif   The Anton Project Authors    32

Zugriffe: 359