CSS - Font Stacks - Thorsten H. Willert

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 - Websichere Font Stacks V1.1
			Download
	02.06.2022 1.8 kB		7

	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 Georg Duffner		6

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