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.Wenn ich z. B. die Schriftart Garamond möchte, muss diese an den Anfang der Liste, nicht an das Ende!
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.
Weiterführende Informationen
- Mozilla Developer Network: font-family
- List of typefaces included with Microsoft Windows
- List of typefaces included with macOS
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 ![]() | 6 |
Anton | |||
Anton Regular ttf, eot, woff and woff2 format. | Download | ||
02.06.2022 375.76 kB SIL Open Font License ![]() | 4 |