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.

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, nicht an das Ende!
Alle folgenden Font Stacks sind systemübergreifend für Windows, Linux und Mac.


Systemschrift



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


Serif Schriften

Times New Roman



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

Georgia



font-family: Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "Nimbus Roman", "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;

Garamond



font-family: Garamond, "Apple Garamond", "ITC Garamond Narrow", "EB Garamond", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;


Sans Serif Schriften

Helvetica



font-family: Helvetica, "Helvetica Neue", Roboto, "Liberation Sans", "DejaVu Sans Condensed", "Nimbus Sans", "Nimbus Sans L", Arial, sans-serif;

Verdana



font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation 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, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;


Monospace



font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;



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.1 */
.system {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

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

.georgia {
	font-family: Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "Nimbus Roman", "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;
}

.garamond {
	font-family: Garamond, "Apple Garamond", "EB Garamond", "ITC Garamond Narrow", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}

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

.verdana {
	font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation 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, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}

.monospace {
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

Download als CSS-Datei am Ende der Seiten.

Ich möchte aber nicht auf eine bestimmmte Schrift verzichten …

Es gibt viele Gründe nur ganz bestimmte Schriften darstellen zu möchten. Sei es wegen wegen dem Corporate Design, weil es einfach gut aussieht usw.

Auch hier gibt es natürlich eine Lösung:
Wenn eine Schrift lokal nicht vorhanden ist, kann man diese alternativ über eine Schriftdatei nachladen.

Hierzu gibt es Lösungen über CSS font-faces.
Ein Artikel dazu ist in Arbeit …
Die Listen werden regelmäßig angepaßt.

Mehr zum Thema

Weiterführende Informationen

Downloads

css.png CSS - Websichere Font Stacks V1.1      
    Download
 02.06.2022  1.8 kB      7

font.png EB Garamont       
Complete EB Garamont Font-Family.
ttf and woff2 format

10 Styles + 2 Variable Fonts + Initials (otf-format, not complete, only: ADFGLNOQT). 
  Download
 02.06.2022  4.1 MB  SIL Open Font License link_extern.gif   Georg Duffner    6

font.png Anton       
Anton Regular
ttf, eot, woff and woff2 format. 
  Download
 02.06.2022  375.76 kB  SIL Open Font License link_extern.gif   The Anton Project Authors    4