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. Wenn ich z. B. die Schriftart Garamond möchte, muss diese an den Anfang der Liste (links), nicht an das Ende!
Evtl. (Laufweiten-) Unterschiede zwischen den Schriften werden über CSS ausgeglichen.
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
Das Ergebnis ist meistens kaum lesbar.
Helvetica mit lighter
aufpassen.Das Ergebnis ist meistens kaum lesbar.
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.
Weiterführende Informationen
- Mozilla Developer Network: font-family
- List of typefaces included with Microsoft Windows
- List of typefaces included with macOS
- archlinux: Metric-compatible fonts
Rechtliche Informationen
- Dejure.org: Urteil zur Nutzung von Google Fonts / LG München I, 20.01.2022 - 3 O 17493/20,
- jsDelivr-Blog: Auswirkungen des Urteils des LG München auf jsDelivr
- eRecht24: Datenschutzerklärung für Font Awesome
Downloads
CSS - Websichere Font Stacks V1.6 | |||
Download | |||
30.06.2022 1.8 KB | 71 |
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 ![]() | 115 |
Anton | |||
ttf, eot, woff und woff2 | Download | ||
02.07.2022 375.76 KB SIL Open Font License ![]() | 77 |