In diesem Tutorial beschäftigen wir uns mit der Frage, wie man individuelle Schriftarten (Fonts) in die eigene Website via CSS einbindet.
Für meine Anleitung spielt es übrigens keine Rolle, ob Sie Ihre Website noch „von Hand“ programmieren oder ein Content Management System wie WordPress nutzen. Im zweiten Fall müssen Sie nur darauf achten, den CSS-Code an die richtige Position im Theme oder den Einstellungen zu setzen.
Vorab noch ein kleiner Lesetipp: Im Artikel „Standard-Schriften oder individuelle Webfonts?“ gehe ich der grundsätzlichen Frage nach, wo die spezifischen Unterschiede sowie die Vor- und Nachteile zwischen Systemfonts und eigenen Schriften liegen.
Fonts lokal oder remote einbinden?
Viele Anbieter von Schriften bieten die Möglichkeit, Fonts direkt von deren Servern zu laden, sozusagen „von der Cloud auf den Bildschirm“. Das mag wie eine gute Idee klingen, ist es aber nicht:
Zum einen verlieren Sie die Kontrolle über die eingebundene Schrift. Geht der Server des Fontslieferanten offline, sieht Ihre Website schnell um einiges weniger attraktiv aus. Außerdem können Sie die Ladezeiten der Fonts – und damit die Performance Ihrer Website – nicht beeinflussen.
Zum anderen gilt eine solche Einbindung nicht als datenschutzkonform im Sinn der DSGVO (Datenschutz-Grundverordnung). Insbesondere Betreiber geschäftlich genutzter Websites setzen sich hier einem nicht unerheblichen Abmahnrisiko aus.
Oder kurz gesagt: Es ist sinnvoller, Webschriften lokal auf dem eigenen Server zu hosten! Basta. 🙂
Webfonts und Suchmaschinen-Optimierung
Grundsätzlich beeinflusst die Nutzung von Webfonts das Ranking Ihrer Site in Suchmaschinen nicht. Es gibt allerdings, wie so oft, ein „Aber…“:
Anzahl genutzter Fonts und Ladezeiten
Bedenken Sie, dass mit jedem eingebundenen Font auch die Ladezeit der Website steigt. Das mag in Zeiten von superschnellem Internet belanglos klingen und ist es erst einmal auch.
Sie sollten trotzdem vermeiden, Dutzende von Fonts in den verschiedensten Schriftschnitten einzubinden. Schon allein, weil das Rendering der Fonts mitunter die Performance der Website im Browser des Nutzers negativ beeinflusst (z.B. leichtes ruckeln beim Scrollen).
Außerdem ist eine überbordende Nutzung von Fonts schon allein aus gestalterischer Sicht nicht zu empfehlen. Beschränken Sie sich am besten auf eine Schmuckschrift für Überschriften und Hervorhebungen sowie auf einen Font für Fließtext.
Cumulative Layout Shift (CLS)
Auf gut Deutsch ist das so etwas wie die „aufsummierte Layoutverschiebung“ (ja, der englische Begriff klingt griffiger): Dabei handelt es sich um für den Nutzer unerwartete Layoutverschiebungen während des Ladevorgangs einer Webseite.
Bei eingebundenen Webfonts kann dieser Effekt auftreten, wenn der betreffende Font bereits genutzt wird, obwohl er noch gar nicht definiert wurde. In diesem Fall verwendet der Webbrowser nämlich eine Standardschriftart.
Aufgrund unterschiedlicher Laufweiten und anderer Attribute können nach dem Laden des Webfonts dann Verschiebungen des Inhalts auftreten. Das könnte wiederum Nutzer verwirren. Und das gilt als negatives Bewertungskriterium für Suchmaschinen.
Verhindern lässt sich CLS beispielsweise, indem der Webfont beim Laden der Seite direkt im Kopfbereich definiert wird, noch bevor das erste Zeichen der Website im Browser dargestellt wurde. Eben genau so, wie ich es im Folgenden beschreibe. 🙂
Quellen und Dateiformate für Webfonts
Schriftarten für die Nutzung im Web finden Sie auf spezialisierten Fonts-Repositories oder direkt beim Urheber der Schriften. Achten Sie bei der Auswahl unbedingt auf die dem Font zugrundeliegenden Lizenz.
Alle modernen Webbrowser unterstützen die folgenden gängigen Dateiformate für Schriftarten:
- WOFF, WOFF2 (Web Open Font)
- OTF (OpenType Format)
- TTF (TrueType Fonts)
Fonts definieren mit der CSS-Regel @font-face
Nach all der Theorie wagen wir uns jetzt ans Eingemachte – wir binden einen Fonts ein!
Das geschieht mittels CSS (Cascading Style Sheets) direkt im Kopfbereich des jeweiligen Dokuments (also zwischen den <head>…</head>-Tags)
@font-face {
font-family: "meinfont";
src: url("https://www.domain.tld/stuff/meinfont.ttf") format:("truetype");}
So funktioniert’s:
In Zeile 2 geben wir dem Font einen spezifischen Namen. Diesen Namen verwenden wir später, um einem Element (z.B. Überschrift oder Fließtext) diesen Font zuzuordnen.
In Zeile 3 wird der Speicherort der Fontdatei angegeben. Achten Sie auf die Angabe „https“, falls Ihre Website eine sichere Verbindung verwendet (sonst erscheint beim Nutzer eine Warnmeldung).
Die Angabe eines Formats ist optional, da sich dieses ja bereits aus der Dateiendung der Schrift selbst ergibt. Sie können es also bedenkenlos weglassen.
Mehrere Dateiformate pro Font festlegen
Wer absolut auf Nummer sicher gehen möchte, kann jeden Font in unterschiedlichen Dateiformaten bereitstellen. Der Browser sucht sich in diesen Fällen automatisch die für ihn passende Variante.
Wichtig: Hier muss das Attribut format zwingend angegeben werden!
@font-face {
font-family: "meinfont";
src: url("https://www.domain.tld/stuff/meinfont.ttf") format:("truetype"),
src: url("https://www.domain.tld/stuff/meinfont.woff2") format:("woff2");}
Fonts verwenden mit der CSS-Eigenschaft font-family
Nachdem der Fonts via CSS eingebunden wurde, steht einer Nutzung desselben eigentlich nichts mehr im Weg. Dies geschieht ebenfalls mit CSS und seiner Eigenschaft font-family:
h1 { font-family: "meinfont"; }
.element { font-family: "'andere schrift'"; font-size: 12px; }
So funktioniert’s:
In Zeile 1 weisen wir den Browser an, alle Hauptüberschriften mit dem Font „meinfont“ darzustellen.
Zeile 2 funktioniert ähnlich. Allerdings definieren wir hier eine Schrift, die ein Leerzeichen im Namen trägt. Deshalb müssen wir diese gesondert in einfache Anführungszeichen setzen.
Für gestalterische Notfälle: Einen Fallback definieren
Kann die gewünschte Schriftart vom Webbrowser nicht geladen werden oder ist inkompatibel, wird automatisch auf eine der im Browser (genauer gesagt, im Betriebssystem des Nutzers) vorhandene Standardschrift zurückgegriffen.
Wer sich in Sachen Webdesign auf besonders aufwändige Schmuckschriften als tragendes Layoutelement verlässt, muss hier als etwas aufpassen und gut testen. Immerhin würde die ungewollte Nutzung einer Standardschrift den Charme der Website vermutlich zunichte machen.
Als Webdesigner haben Sie aber die Möglichkeit, eine (oder mehrere) der Standardschriften als Fallback anzugeben, um zumindest ein bisschen Einfluss auf die Entscheidung des Browsers zu nehmen.
Das ist ganz simpel: Geben Sie einfach nach der favorisierten Schriftart durch Komma getrennt weitere Schriftarten (oder Schriftfamilien) an, die verwendet werden sollen, falls der präferierte Font nicht zur Verfügung steht.
Wie bereits erwähnt, können sogar ganze Schriftfamilien angegeben werden. Das ist sinnvoll, da – abhängig vom Betriebssystem – nicht alle Standardschriften auf allen Endgeräten tatsächlich zur Verfügung stehen.
Die populärsten generischen Schriftfamilien im Überblick
- serif – eine Schrift mit Serifen (Endstrichen), z.B. Times New Roman oder Trebuchet MS
- sans-serif – eine Schrift ohne Serifen, z.B. Arial oder Helvetica
- monospace – eine Schrift mit gleicher Zeichenbreite, z.B. Courier
- cursive – eine Schreibschrift, z.B. Comic Sans oder Bradley Hand
- fantasy – eine „Phantasieschrift“, z.B. Chalkduster oder Marker Felt
Tipp: Ich empfehle Ihnen, bei der Angabe eines Fallbacks zwischen Serifen-Fonts (z.B. Times New Roman) und serifenlosen Schriften (z.B. Arial) zu unterscheiden. Verwenden Sie diejenige, die am besten zu Ihrem eigentlich gewünschten Font gehört.
Beispiel 1 für einen Font-Fallback (Serifen-Font):
h1 { font-family: "meinfont,'Times New Roman'"; }
Beispiel 2 für einen Font-Fallback (mehrere serifenlose Fonts):
h1 { font-family: "meinfont,'Neue Helvetica',Helvetica,Arial"; }Die Liste wird von links nach rechts abgearbeitet. Der erste auf dem Computer des Nutzers vorhandene Font wird gewählt.
Beispiel 3 für einen Font-Fallback (Serifen-Font, Schriftfamilie):
h1 { font-family: "meinfont,'Times New Roman',serif"; }
Beispiel 4 für einen Font-Fallback (serifenloser Font, Schriftfamilie):
h1 { font-family: "meinfont,'Trebuchet MS',sans-serif"; }
Autor: Tobias Eichner | Datum der Veröffentlichung: März 2023
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
