Webfonts

Schriftfamilien im Überblick

Wie im Artikel Grundlagen der Text- und Schriftgestaltung beschrieben, können Sie die auf Ihr HTML angewendeten Schriftarten mit der Eigenschaft font-family steuern. Diese nimmt einen oder mehrere Namen von Schriftfamilien entgegen. Beim Anzeigen einer Webseite geht der Browser die Liste der font-family-Werte durch, bis er eine Schriftart findet, die auf dem System verfügbar ist, auf dem er ausgeführt wird:

p {
  font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
}

Dieses System funktioniert gut, doch traditionell war die Auswahl an Schriftarten für Webentwickler begrenzt. Nur bei einer Handvoll Schriftarten können Sie davon ausgehen, dass sie auf allen gängigen Systemen verfügbar sind – den sogenannten websicheren Schriftarten. Sie können in der Liste bevorzugte Schriftarten angeben, gefolgt von websicheren Alternativen und schließlich der Standardschriftart des Systems. Das erhöht jedoch Ihren Arbeitsaufwand, da Sie prüfen müssen, ob Ihr Design mit jeder dieser Schriftarten funktioniert.

Webfonts

Es gibt eine gut funktionierende Alternative: Mit CSS können Sie Schriftdateien angeben, die im Web verfügbar sind und beim Aufruf Ihrer Website heruntergeladen werden. So kann jeder Browser, der diese CSS-Funktion unterstützt, die von Ihnen ausgewählten Schriftarten anzeigen. Die erforderliche Syntax sieht ungefähr so aus:

Zunächst steht am Anfang des CSS ein @font-face-Regelsatz, der angibt, welche Schriftdatei oder Schriftdateien heruntergeladen werden sollen:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

Anschließend verwenden Sie den in @font-face festgelegten Namen der Schriftfamilie wie gewohnt, um Ihre eigene Schriftart auf die gewünschten Elemente anzuwenden:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

Die Syntax kann etwas komplexer werden. Weiter unten gehen wir näher darauf ein.

Bei Webfonts sollten Sie einige wichtige Punkte beachten:

1. Schriftarten dürfen in der Regel nicht uneingeschränkt kostenlos verwendet werden. Möglicherweise müssen Sie dafür bezahlen und/oder weitere Lizenzbedingungen einhalten, etwa den Urheber der Schriftart in Ihrem Code oder auf Ihrer Website nennen. Sie sollten Schriftarten nicht ohne entsprechende Berechtigung oder Namensnennung verwenden.
2. Alle modernen Browser unterstützen WOFF2 (Web Open Font Format Version 2). Daher verwenden wir in diesem Artikel dieses Format.
3. WOFF2 unterstützt die gesamten TrueType- und OpenType-Spezifikationen, einschließlich variabler Schriftarten, farbiger Schriftarten und Schriftsammlungen.
4. Es empfiehlt sich, möglichst wenige Webfont-Dateien bereitzustellen. Wenn Sie nur die benötigten Formate verwenden, muss Ihre Website weniger Dateien ausliefern und die Schrift-Downloads bleiben kleiner.
5. Wenn Sie in einem realen Projekt ältere Browser unterstützen müssen, benötigen Sie möglicherweise zusätzlich WOFF. In der Tabelle zur Browser-Kompatibilität für @font-face können Sie nachsehen, wie weit die Unterstützung für WOFF und WOFF2 zurückreicht.

Mit dem Firefox Font Editor können Sie die auf Ihrer Seite verwendeten Schriftarten untersuchen und bearbeiten – unabhängig davon, ob es sich um Webfonts handelt.

Eigene Webfonts hinzufügen

Erstellen wir nun von Grund auf ein einfaches Beispiel mit Webfonts. Verwenden Sie die Dateien web-font-start.html und web-font-start.css als Ausgangspunkt für Ihren Code (siehe das Live-Beispiel). Kopieren Sie diese Dateien zunächst in ein neues Verzeichnis auf Ihrem Computer. In der Datei web-font-start.css finden Sie bereits etwas CSS für das grundlegende Layout und die Schriftgestaltung des Beispiels.

Schriftarten finden

Für dieses Beispiel verwenden wir zwei Webfonts: einen für die Überschriften und einen für den Fließtext. Zunächst benötigen wir die entsprechenden Schriftdateien. Schriftarten werden von Schriftgießereien erstellt und in unterschiedlichen Dateiformaten gespeichert. Im Allgemeinen gibt es drei Arten von Websites, auf denen Sie Schriftarten beziehen können:

• Ein Anbieter kostenloser Schriftarten: Auf einer solchen Website können Sie Schriftarten kostenlos herunterladen. Es können dennoch Lizenzbedingungen gelten, beispielsweise die Pflicht zur Namensnennung des Urhebers. Beispiele sind DaFont und Everything Fonts.
• Ein Anbieter kostenpflichtiger Schriftarten: Auf einer solchen Website erhalten Sie Schriftarten gegen Bezahlung, beispielsweise bei myfonts.com. Sie können Schriftarten auch direkt bei Schriftgießereien kaufen, etwa bei Linotype, Monotype oder Exljbris.
• Ein Onlinedienst für Schriftarten: Eine solche Website speichert die Schriftarten und stellt sie für Sie bereit, was den gesamten Vorgang vereinfacht. Weitere Informationen finden Sie im Abschnitt Einen Onlinedienst für Schriftarten verwenden.

Suchen wir nun einige Schriftarten! Rufen Sie DaFont auf und wählen Sie zwei Schriftarten: eine interessante Schriftart für die Überschriften, vielleicht eine Display-Schrift oder eine Slab-Serif-Schrift, und eine etwas zurückhaltendere, besser lesbare Schriftart für die Absätze. Wenn Sie eine passende Schriftart gefunden haben, klicken Sie auf die Download-Schaltfläche und speichern Sie die Datei im selben Verzeichnis wie die zuvor gespeicherten HTML- und CSS-Dateien. Ob es sich um TrueType Fonts (TTF) oder OpenType Fonts (OTF) handelt, spielt keine Rolle.

Entpacken Sie die beiden Schriftpakete. Webfonts werden üblicherweise als ZIP-Dateien mit den Schriftdateien und Lizenzinformationen bereitgestellt. Möglicherweise enthält ein Paket mehrere Schriftdateien: Manche Schriftarten werden als Familie mit verschiedenen Varianten angeboten, beispielsweise dünn, mittel, fett, kursiv oder dünn kursiv. Für dieses Beispiel benötigen Sie für jede der beiden ausgewählten Schriftarten nur eine Datei.

Den erforderlichen Code erzeugen

Als Nächstes müssen Sie den erforderlichen Code und die Schriftformate erzeugen. Gehen Sie dazu wie folgt vor:

1. Stellen Sie sicher, dass Sie alle Lizenzbedingungen erfüllen, falls Sie die Schriftarten in einem kommerziellen Projekt und/oder einem Webprojekt verwenden möchten.
2. Öffnen Sie den Webfont-Generator von Transfonter.
3. Laden Sie Ihre beiden Schriftdateien über die Schaltfläche Upload your fonts hoch.
4. Stellen Sie sicher, dass nur WOFF2 ausgewählt ist. Deaktivieren Sie WOFF.
5. Klicken Sie auf Convert.
6. Klicken Sie auf Download.

Entpacken Sie die heruntergeladene ZIP-Datei und verschieben Sie das entpackte Verzeichnis in dasselbe Verzeichnis wie Ihre HTML- und CSS-Dateien.

Den Code in Ihr Beispiel einbauen

Im entpackten Verzeichnis finden Sie einige nützliche Dateien:

• Eine .woff2-Version jeder Schriftart.
• Eine Demo-HTML-Datei für jede Schriftart. Öffnen Sie diese Dateien im Browser, um zu sehen, wie die Schriftarten in verschiedenen Verwendungskontexten aussehen.
• Eine Datei namens stylesheet.css mit dem erzeugten @font-face-Code, den Sie benötigen.

Gehen Sie wie folgt vor, um die Schriftarten in Ihr Beispiel einzubauen:

1. Benennen Sie das entpackte Verzeichnis einfach und eindeutig um, beispielsweise in fonts.

2. Öffnen Sie stylesheet.css und kopieren Sie die beiden @font-face-Regelsätze in Ihre Datei web-font-start.css. Setzen Sie sie ganz an den Anfang, vor Ihr übriges CSS, da die Schriftarten importiert werden müssen, bevor Sie sie auf Ihrer Website verwenden können.

3. Jede url()-Funktion verweist auf eine Schriftdatei, die in das CSS eingebunden werden soll. Stellen Sie sicher, dass die Dateipfade stimmen, indem Sie jedem Pfad fonts/ voranstellen. Passen Sie die Pfade bei Bedarf an.

4. Nun können Sie diese Schriftarten in Ihren Schriftlisten verwenden, genau wie websichere Schriftarten oder Standardschriftarten des Systems. Zum Beispiel:

   css

   @font-face {
     font-family: "zantrokeregular";
     src: url("fonts/zantroke-webfont.woff2") format("woff2");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }
   

   css

   font-family: "zantrokeregular", serif;
   

   Die generische Schriftfamilie serif dient als Ausweichlösung mit einer Systemschriftart, falls der Webfont nicht geladen werden kann. Eine geringe Zahl von Webfont-Dateien und -Formaten verbessert außerdem die Performance, da der Browser weniger Ressourcen abrufen muss.

Am Ende sollten Sie eine Beispielseite mit ansprechenden Schriftarten haben. Da verschiedene Schriftarten unterschiedlich groß ausfallen, müssen Sie möglicherweise Schriftgrößen, Abstände und Ähnliches anpassen, um das Erscheinungsbild zu verbessern.

Einen Onlinedienst für Schriftarten verwenden

Onlinedienste für Schriftarten speichern die Schriftarten in der Regel für Sie und stellen sie bereit. Sie müssen sich daher nicht selbst um den @font-face-Code kümmern. Stattdessen fügen Sie meist nur ein oder zwei einfache Codezeilen in Ihre Website ein. Beispiele hierfür sind Adobe Fonts und Cloud.typography. Die meisten dieser Dienste erfordern ein Abonnement. Eine nennenswerte Ausnahme ist Google Fonts, ein nützlicher kostenloser Dienst, insbesondere für schnelle Tests und die Erstellung von Beispielen.

Die meisten dieser Dienste sind einfach zu verwenden. Sehen wir uns Google Fonts kurz an, damit Sie das Prinzip kennenlernen. Verwenden Sie erneut Kopien von web-font-start.html und web-font-start.css als Ausgangspunkt.

1. Öffnen Sie Google Fonts.
2. Suchen Sie mithilfe der Filter und der Suchleiste nach einigen Schriftarten, die Ihnen gefallen.
3. Klicken Sie auf eine Schriftart, um deren Detailseite zu öffnen.
4. Wenn Sie eine passende Schriftart gefunden haben, klicken Sie auf ihrer Detailseite auf Get font, um sie zur Seite mit den ausgewählten Schriftarten hinzuzufügen. Wenn Sie eine weitere Schriftart hinzufügen möchten, verwenden Sie die Zurück-Schaltfläche Ihres Browsers und suchen Sie erneut.
5. Wenn Sie alle Schriftarten ausgewählt haben, klicken Sie auf der Seite mit den ausgewählten Schriftarten auf Get embed code und kopieren Sie die bereitgestellten <link>-Elemente.
6. Fügen Sie die <link>-Elemente in den <head> Ihres HTML-Dokuments ein, oberhalb aller vorhandenen Links zu Stylesheets.
7. Kopieren Sie die bereitgestellten CSS-Regeln für font-family und verwenden Sie sie in Ihrem CSS, um die Schriftarten anzuwenden – ähnlich wie im vorherigen Beispiel.

@font-face im Detail

Sehen wir uns die @font-face-Syntax genauer an, die Transfonter für Sie erzeugt hat. Die Regelsätze sehen ungefähr so aus:

@font-face {
  font-family: "zantrokeregular";
  src: url("zantroke-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Gehen wir die Bestandteile durch:

• font-family: Diese Zeile legt den Namen fest, unter dem Sie die Schriftart verwenden möchten. Sie können einen beliebigen Namen wählen, solange Sie ihn in Ihrem gesamten CSS einheitlich verwenden.
• src: Diese Zeile gibt den Pfad zur Schriftdatei an, die in Ihr CSS eingebunden werden soll (der url-Teil), sowie das Schriftformat (der format-Teil). Der zweite Teil ist optional. Es ist jedoch hilfreich, das Format anzugeben, da Browser so schneller feststellen können, ob sie die Schriftart verwenden können. Wenn Sie ältere Browser unterstützen müssen, können Sie zusätzliche Schriftquellen durch Kommas getrennt auflisten. Stellen Sie dabei das bevorzugte Format – üblicherweise WOFF2 – an den Anfang.
• font-weight/font-style: Diese Zeilen geben die Strichstärke der Schriftart an und legen fest, ob sie kursiv ist. Wenn Sie mehrere Strichstärken derselben Schriftart importieren, können Sie deren Strichstärke und Stil angeben und anschließend mit unterschiedlichen Werten für font-weight und font-style zwischen ihnen wählen. So müssen Sie nicht jeder Variante der Schriftfamilie einen anderen Namen geben. Der Artikel @font-face-Tipp: font-weight und font-style definieren, um CSS einfach zu halten von Roger Johansson erklärt dies ausführlicher.
• font-display: Diese Zeile legt fest, wie die Schriftart während des Ladevorgangs angezeigt wird.

Zusammenfassung

Nachdem Sie unsere Artikel über die Grundlagen der Textgestaltung durchgearbeitet haben, können Sie Ihr Verständnis mit der Aufgabe zu diesem Modul überprüfen: Die Startseite einer Gemeindeschule typografisch gestalten.

Wenn Sie die Aufgabe abgeschlossen haben, können Sie sich als Nächstes mit CSS-Layout beschäftigen.

Siehe auch

• Leitfaden zu variablen Schriftarten
• Wissenswertes über Schriftarten, Google Fonts

• Zurück
• Übersicht: CSS-Textgestaltung
• Weiter