In CSS und HTML Schriften ändern

Worum geht´s?

In diesem CSS-Tutorial lernen wir, wie wir mit Hilfe von Google Fonts oder auch lokal gespeicherten Fonts HTML Schriften einbindeen bzw. die Schrift ändern können.

1. Wie wir in CSS und HTML die Schriftart ändern können

Grundsätzlich gibt es in CSS einen recht einfachen Befehl, der die Schriftart eines HTML-Elements festlegt: font-family.

1.1 In CSS und HTML Schriften ändern mit font-family

Im Quellcode sieht das Ganze dann in etwa so aus:

h1 {
    font-family: "Century Gothic";
}

Es gibt hier eine Liste an Standard-Schriften, die man standardmäßig verwenden kann und von den meisten Browsern unterstützt werden.

Was aber, wenn ein Browser die angegebene Schrift nicht unterstützt?

Das bringt uns zu den Fallback-Schriften.

1.2 Was Fallback-Schriftarten sind und wie man sie verwendet

Wenn der Browser die eigentlich angegebene Schrift nicht eingebaut hat, muss er stattdessen eine andere verwenden.

Er wird sich bemühen, eine zu finden, die möglichst ähnlich ist.

Oft funktioniert das ganz gut. Manchmal aber auch gar nicht.

Deshalb kann man dem Browser mit Hilfe der Fallback-Schriften sagen, was sozusagen die zweitbeste Wahl ist.

Und das funktioniert so:

h1 {
    font-family: "Times New Roman", Times, serif;;
}

Die erste Schrift in der Liste ist jeweils diejenige, die man eigentlich haben will. Dann folgt sozusagen die 2. Wahl, dann die 3. Wahl, usw.

Am Ende folgt im Regelfall eine verallgemeinerte Kategorie von Schriften. Hier eine kleine Auswahl:

• ’serif‘ (z.B. Times): Serifen sind die kleinen „Ausbuchtungen“ an den Enden der Buchstaben, die man meist in Bücher- und Zeitungs-Schriften findet.
• ’sans-serif‘ (z.B. Helvetica): Keine Serifen, eher gerade und unverschnörkelte Schriften.
• ‚cursive‘ (z.B. Zapf-Chancery): Kursive Schriften.
• ‚fantasy‘ (z.B. Western): Besonders verschnörkelte oder verzierte Schriften
• ‚monospace‘ (z.B. Courier): Jeder Buchstabe ist gleich breit, ein l braucht gleich viel Platz als ein o. Manchmal nützlich.

Da sich z.B. sans-serif-Schriften untereinander mehr ähneln als fantasy-Schriften, können wir davon ausgehen, dass diese sich zumindest in etwa ähnlich sein werden.

2. Mit CSS und HTML Schriften einfügen, die sonst nicht verfügbar sind

Was aber, wenn wir eine ganz bestimmte Schrift auf unserer Website verwenden wollen?

Dann haben wir u.A. zwei Möglichkeiten:

• Die Schrift über Anbieter wie Google Fonts einbinden
• Die Schrift lokal auf dem eigenen Webserver speichern und verlinken

Beginnen wir mit den Google Fonts.

2.1 Google Fonts in unsere Website einfügen

Bevor wir eine Schrift von Google Fonts einfügen können, müssen wir sie erst einmal auswählen.

Geh dazu auf diesen Link, der dich zu Google fonts führt, oder gib einfach „Google fonts“ in die Suchmaschine deiner Wahl ein.

Du solltest nun eine Liste verfügbarer Schriften vor dir haben:

Dort, wo oben in der Mitte „type something“ steht, kannst du einen Text eingeben, der dann in allen verfügbaren Schriften angezeigt wird.

Das solltest du tun, und darauf achten, dass darin Zahlen und – wenn du z.B. eine deutsche Website erstellen willst – auf jeden Fall auch Umlaute usw. vorkommen. Manche Schriften unterstützen z.B. kein Ä, das musst du mitbedenken.

Wenn du den Text unter „type something“ entsprechend änderst, kannst du gleich bei jeder Schrift in der Auswahl überprüfen, ob sie auch mit Umlauten etc. funktioniert.

Wenn du dann eine Schrift für dich gefunden hast, einfach darauf klicken.

Im nächsten Schritt kannst du noch Varianten der Schrift (z.B. fetter oder kursiver) wählen:

Ein guter Standard-Wert für die „Fettigkeit“ einer Schrift wäre in etwa 300-500. Alles ab 700 wird meist schon seeeehr fett.

Klicke auf „Select this style“, um die Variante auszuwählen, die dir gefällt.

Dann sollte sich rechts ein kleiner Bereich öffnen, wo du alle ausgewählten Schriften aufgelistet findest. Falls das nicht passiert, musst du dazu noch auf den im Bild unten mit dem orangen Pfeil gekennzeichneten Button klicken, damit die richtige Ansicht aufklappt:

Und nun sind wir schon fast fertig.

Google ist so nett, uns im Grunde schon alles vorzubereiten, was wir noch brauchen.

Nun gibt es zwei Möglichkeiten, wie wir weitermachen können:

• Mit einem <link>-Tag im HTML-Code
• Mit einem @import im CSS-Code

Da unser CSS-Code in einer einzigen .css-Datei eingefügt werden kann, die dann von allen HTML-Unterseiten aufgerufen wird, ist die 2. Variante in den meisten Fällen die einfacherere.

Hier trotzdem beide ganz kurz:

2.1.1 Google Fonts-Schriften einfügen mit dem <link>-Tag im HTML-Code

Hier ein Beispiel für die eingefügte Google Font-Schriftart „Montserrat“:

<html>
    <head>
        <link rel="stylesheet" href="style.css">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet"> 
    </head>
    <body>
        <h1>Test-Überschrift</h1>
    </body>
</html>

Relevant sind dabei nur die 3 <link>-Tags im unteren <head>-Bereich.

2.1.2 Google Fonts-Schriften einfügen mit @import im CSS-Code

Die gleiche Schriftart können wir auch über unsere .css-Datei einfügen:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

Das wars.

Beziehungsweise fast. Wir müssen dem Browser ja noch sagen, welche HTML-Elemente die Schrift verwenden sollen.

2.1.3 Die eingefügte Google Font auch einsetzen

Dies machen wir genau gleich wie mit den schon vordefinierten Schriften wie Arial. Wir setzen den Namen der zusätzlichen Schrift einfach ein den font-family-Befehl ein:

h1 {
    font-family: Montserrat;
}

Und schon ist unsere h1-Überschrift abgeändert worden und verwendet die veränderte Schriftart!

2.1.4 Vorteile und Nachteile von Google Fonts

Google Fonts zu verwenden hat einige Vorteile, aber auch einige potentielle Nachteile.

2.1.4.1 Vorteil 1: Google Fonts werden über ein CDN ausgeliefert

Ein Vorteil ist, dass die Schriftarten über Google Fonts über ein sogenanntes CDN geladen werden. CDN steht dabei für Content Delivery Network, und bezeichnet die Technik, die selbe Datei auf mehreren Servern weltweit verfügbar zu stellen. Wenn jetzt ein Webseiten-Besucher aus Österreich ist, verbindet ihn das CDN z.B. nach Deutschland. Ein anderer Webseiten-Besucher aus Indien wird vielleicht auf einen Server nach Indien oder China geleitet, usw.

Es geht dabei darum, die Wege möglichst kurz zu halten. Das hat positive Auswirkungen auf die Lade-Geschwindigkeit.

2.1.4.2 Vorteil 2: Google Fonts werden oft verwendet und befinden sich oft im Browser-Cache

Ist eine Schrift-Datei in einer Website verwendet worden und musste vom Browser erst heruntergeladen werden, so wird diese oft im Browser-Cache (gewissermaßen das „Kurzzeit-Gedächtnis“ des Browsers) gespeichert. Wird nun eine andere Website besucht, die die gleiche Schriftart verwendet, so kann die Schriftart gleich aus diesem „Kurzzeitgedächtnis“, dem Cache, geladen werden.

Diese Website hier verwendet z.B. die Schriftart „Alegreya“. Wenn du nach dem Besuch der relativeMeister-Website eine andere aufrufst, die ebenso die Font „Alegreya“ benutzt, so ist die Chance groß, dass diese Seite rascher lädt.

Je mehr Websites Google Fonts benutzen, desto schneller laden sie damit alle.

2.1.4.3 Nachteil1: Google liest mit – Google Fonts haben Auswirkungen auf deine Datenschutzbestimmungen

Wenn eine Website die Google Fonts aufruft, kann Google anhand der Aufrufe – wieder mal – ein wenig besser nachverfolgen, wie Webseiten-Besucher sich durchs Internet bewegen. Google stellt viele hilfreiche Dienste zur Verfügung, aber profitiert meist auch selbst dabei. Das muss dir immer klar sein, wenn du diese Möglichkeiten nutzt.

Weil du mit der Verwendung von Google Fonts damit dem Unternehmen Google Informationen über deine Webseiten-Besucher mitteilst, musst du darauf achten, das auch entsprechend in deinen Datenschutz-Bestimmungen usw. zu erwähnen bzw. lokale Gesetze was solche Vorgangsweisen betrifft beachten.

Willst du das alles vermeiden, kannst du Schriften auch lokal (auf dem Webserver) speichern und einfügen.

2.2 Mit CSS und HTML Schriften lokal (vom eigenen Server) einfügen

Damit du eine Schriftart lokal einfügen kannst, brauchst du als erstes die Schriftart als Schriftart-Datei.

Es gibt dabei verschiedene Formate, wobei das hier die häufigsten sind:

• .woff2
• .woff
• .otf
• .ttf
• .eot

Die .woff2 bzw. .woff sind die „moderneren“ Formate (.woff2 ist die Weiterentwicklung von .woff), wobei auch z.B. .ttf noch verbreitet ist.

Du brauchst also eine .woff2-Datei deiner Schriftart. Wenn du z.B. „nur“ eine .ttf-Datei hast, kannst du sie mit dem sehr nützlichen Konverter von FontSquirrel in alle anderen Formate (inklusive .woff2) umwandeln lassen.

Die Datei packst du dann an den selben Ort, an dem sich auch deine style.css befindet.

Als nächstes musst du die Schriftart mit font-face nutzbar machen:

@font-face {
    font-family: 'myMontserat';
    src:  url('myMontserat.woff2') format('woff2'),
          url('myMontserat.woff') format('woff');
}

In diesem Fall haben wir 2 Versionen der Schriftart angegeben. Falls nämlich der Browser des Webseiten-Besuchers das .woff2-Format noch nicht unterstützt, kann er stattdessen das .woff-Format verwenden.

In den meisten Fällen wird das aber mittlerweile nicht mehr notwendig sein, und du kommst mit dieser Version aus:

@font-face {
    font-family: 'myMontserat';
    src:  url('myMontserat.woff2') format('woff2');
}

Das packst du an den Beginn deiner .css-Datei, z.B. deiner style.css – nun kannst du mit dem CSS-Befehl font-family genau wie bei den Google Fonts vorhin deinen HTML-Elementen die neue Schrift verpassen.

Der Vorteil dieser Methode ist, dass du dir den ganzen Aufwand mit den Datenschutzbestimmungen ersparst. Du kannst sogar die einzelnen Google fonts als .ttf-Datei herunterladen und dann mit dem FontSquirrel-Konverter in .woff2 konvertieren.

Der Nachteil dieser Variante ist die möglicherweise etwas langsamere Ladegeschwindigkeit deiner Website.

3. Welche Schriftart passt nun zu meiner Website?

Wie bei den Farben ist die Antwort auch hier sehr subjektiv. Aber es gibt einige Grundregeln:

• Mehr als 2-3 Schriften wirken visuell verwirrend und beeinträchtigen die Ladezeit der Website zu sehr
• Es kann zwecks Kontrast Sinn machen, die 2-3 Schriften aus verschiedenen Schrift-Kategorien (serif, sans-serif, fantasy, …) zu wählen
• Wichtige Inhalte sollten nie in schwer lesbaren Schriften gesetzt sein
• Je schwerer lesbar eine Schrift, desto weniger Text darf die Text-Passage haben

Der Rest ist Erfahrung und ein Stück weit Geschmacks-Sache.

4. In CSS und HTML Schriften ändern

Neben der Schriftart gibt es natürlich auch noch einige weitere Aspekte von Schriften, die für unser Webdesign relevant sein können.

Hier einige der wichtigsten als CSS-Befehle zum Schriften ändern:

a {
    font-family: "myMontserat";
    color: red;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    text-indent: 20px;
    text-decoration: underline;
    font-style: italic;
    text-transform: uppercase;
}

Im Einzelnen:

4.1 font-family: Die Schriftart ändern

Mit diesem CSS-Befehl kann die Schriftart eingestellt werden – vorausgesetzt der Browser unterstützt sie schon, oder sie wird über Google Fonts bzw. eine lokale Schrift-Datei eingebunden.

4.2 color: Die Schrift-Farbe ändern

Die Farbe der Schrift festlegen. Mehr zu Farben findest du im CSS-Tutorial über Farben in CSS und HTML.

4.3 font-size: Die Schrift-Größe ändern

Die Schriftgröße einstellen. Empfohlen wird für Haupt-Texte eine Mindestgröße von 18px oder mehr – einfach weil größerer Text besser lesbar ist.

4.4 line-height: Die Zeilenhöhe ändern

Die Lesbarkeit eines Textes wird auch durch die Zeilenhöhe bestimmt.

Innerhalb der Zeilenhöhe wird der Text normalerweise vertikal zentriert ausgerichtet – das heißt, von oben nach unten ist innerhalb der Zeilenhöhe der Text mittig angesiedelt.

Je größer die line-height eines Textes, desto mehr Abstand findet sich zwischen den Zeilen.

Bei einer Schriftgröße von 20px fühlt sich beispielsweise eine Zeilenhöhe ab ca. 30px für die meisten Menschen gut zum Lesen an.

4.5 font-weight: Die Schrift-Dicke ändern

Hier kann einfach ein Wort wie „bold“ (=fett) als Wert eingesetzt werden, oder aber eine Zahl. 300 ist eher dünn, 500-600 so durchschnittlich dick, und 900 z.B. führt schon zu relativ dicken Buchstaben.

4.6 text-align: Die Schrift-Ausrichtung ändern

Mit text-align kann bestimmt werden, ob ein Text linksbündig, rechtsbündig oder zentriert ausgerichtet wird (left, right oder center als Wert).

Der Befehl funktioniert übrigens auch für viele andere Inhalte – so können z.B. Bilder auch meist mit dem Befehl zentriert werden, wenn er auf das Eltern-Element angewandt wird.

Es gibt zwar theoretisch auch den Wert „justify“ für Blocksatz, aber er ist nicht empfohlen. Meist schaut das Ergebnis nicht allzu schön aus.

4.7 text-indent: Den Einzug des Textes ändern

Der CSS-Befehl text-indent ermöglicht es, einen Absatz in der ersten Zeile anders starten zu lassen als in den Folge-Zeilen.

Ein text-indent von 20px lässt beispielsweise alle Zeilen außer die erste um 20px weiter rechts starten.

Setzen wir ein Minus vor unseren Wert, dreht sich das Ganze um. Die erste Zeile startet etwas weiter links als die anderen.

4.8 text-decoration: Verzierungen wie Unterstreichungen

Mit dem CSS-Befehl text-decoration können Verzierungen eines Textes erreicht werden, wie z.B. Unterstreichungen.

Dieser Befehl ist vor allem auch nützlich, um die standardmäßig voreingestellten Unterstreichungen von Links zu entfernen.

Dies geht so:

a {
  text-decoration: none;
}

4.9 font-style: Änderungen wie kursive Schrift

Mit dem CSS-Befehl font-style können Texte z.B. kursiv gestellt werden.

Der Befehl für kursiv heißt im Englischen übrigens „italic“ – vermutlich weil diese Art der Schrift erstmals in Italien gebräuchlich war.

Wir erreichen eine kursive Schrift so:

a {
  font-style: italic;
}

4.10 text-transform: Änderungen wie alle Buchstaben groß

Was, wenn wir einen Text haben, bei dem wir z.B. alle Buchstaben in Großbuchstaben haben wollen?

Auch das ermöglicht uns CSS sehr einfach mit dem CSS-Befehl text-transform:

a {
  text-transform: uppercase;
}

Außerdem gibt es z.B. noch „lowercase“ (nur Kleinbuchstaben) und „capitalize“ (erster Buchstabe groß).

Diskussion zum Tutorial