--> In CSS und HTML Schriftarten ändern mit Google Fonts - Bunterrichten

In CSS und HTML Schriftarten ändern mit Google Fonts

(Letztes Update von Niklas Baumgärtler am 6.7.2020)

Nun werden wir uns damit befassen, wie wir in CSS und HTML Schriftarten ändern können. Wir werden uns ansehen, wo du Schriften herbekommen kannst, was dabei rechtlich und technisch zu beachten ist, wie du Schriften in deine HTML-Seite einbindest und wie du sie den einzelnen HTML-Elementen zuweist.

Bevor wir uns damit befassen wo wir nun Schriften herbekommen und wie wir sie einbinden und zuweisen, eine Warnung zum Rechtlichen:

1. Rechtliches zu Schriftarten in Webseiten

Rechtlich betrachtet ist die Verwendung von Schriften für die du keine entsprechenden Rechte hast ein überraschend teures Vergehen.

Wenn du zum  Beispiel ein Programm wie Word oder Grafik-Programme erwirbst, dann enthält dies auch das Recht, Druckwerke mit Hilfe dieser Programme zu erstellen und zu vervielfältigen. Dabei ist es egal ob du z.B. einen Flyer den du im Programm Word gemacht hast 3 Mal oder 100.000 Mal druckst. Du zahlst nur einmal beim Kauf des Schreibprogramms dafür, dass du die Schriften verwenden darfst.

Bei Webseiten funktioniert das jedoch anders, nämlich nach der Anzahl an Betrachtungen. Auf Deutsch: Je mehr Besucher die Webseite betrachten, desto mehr zahlst du für die Verwendung der Schrift, wenn du sie erwirbst.

Im Internet gibt es viele Plattformen, bei denen du bestimmte Schriften mehr oder weniger kostenlos herunterladen kannst. Allerdings gibt es bei vielen dieser Plattformen Bedingungen in den AGBs versteckt. Z.B. kann es sein, dass du dann den Schriften-Ersteller irgendwo im Impressum erwähnen musst. Tust du dies nicht, könntest du im schlechtesten Fall verklagt werden. Falls deine Webseite viele Besucher hatte, kann das dann in die mehreren Tausend Euro gehen.

Die einfachste und sicherste Variante, Schriftarten wirklich kostenfrei zu nutzen, ist die Schriftarten über Google Fonts zu verwenden. Diese sind von Google absichtlich gratis zur Verfügung gestellt worden – die wollen, dass du die Schriften verwendest. Aber warum sollten die das tun?

Die Antwort findest du im nächsten Kapitel über die technischen Grundlagen.

2. Technisches Hintergrund-Wissen zu Schriften in Webseiten

Der Computer den du verwendest hat im Normalfall eine große Anzahl an Schriftarten bereits vorinstalliert, die du dann in verschiedensten Programmen wie z.B. Word nutzen kannst. Dazu gibt es bestimmte Datei-Arten einer Schrift, oft z.B. mit der Endung .tff.

Wenn eine Webseite nun eine bestimmte Schriftart verwenden möchte, dann muss der Browser irgendwie einen Zugriff auf die entsprechende Schriftarten-Datei bekommen. Dazu gibt es im Grunde nun drei Möglichkeiten:

  • Der Computer auf dem der Browser installiert ist hat die Schriftart schon im System installiert
  • Der Browser muss die Schriftart von dem Server herunterladen auf dem die Webseite läuft
  • Der Browser muss die Schriftart von einem anderen Server herunterladen (CDN)

2.1 Die Schriftart ist dem Browser bereits bekannt

Die erste Variante ist die einfachste. In diesem Fall muss der Browser einfach den Namen der Schriftart die von der Webseite gewählt wurde im Schriften-Verzeichnis des Systems finden und sie anzeigen. Die Schriftarten-Datei muss nicht heruntergeladen werden, und die Webseite kann schnell angezeigt werden. In diesem Fall kannst du auch rechtlich keine Probleme wegen der Schriften bekommen.

2.2 Der Browser muss die Schriftart von der Webseite selbst herunterladen

In der zweiten Variante muss der Browser die Schriftart erst aus einem Unterordner der Webseite herunterladen, bevor er sie anzeigen kann. Das dauert, und die Webseite lädt zumindest beim ersten Mal langsamer. Beim zweiten Mal ist die Schriftart-Datei ja dann schon im System installiert, und der erste Fall tritt ein.

2.3 Der Browser muss die Schriftart von einer anderen Quelle herunterladen (CDN)

Die dritte Variante macht dort Sinn, wo jemand so freundlich ist, einen extra-schnellen Server zur Verfügung zu stellen, von dem der Download der Schrift noch schneller geht, als wenn die Schrift direkt vom Server der eigentlichen Webseite heruntergeladen worden wäre.

Vielleicht hast du schon einmal von einem “Content Delivery Network” (CDN) gehört? Das ist ein ganzes Netzwerk von Servern, das über die ganze Welt verteilt ist. Wenn jetzt z.B. ein Webseiten-Besucher in Österreich eine Webseite ansieht, dann wählt das CDN den Server aus dem CDN-Netzwerk aus, der am nächsten ist (also eher Deutschland als z.B. Indien). Die Internet-Leitung von Österreich nach Deutschland ist wie du dir vorstellen kannst erheblich kürzer als nach Indien, daher ist sie auch schneller. Ein CDN sorgt also für kürzere Wege und dadurch schnellere Verbindungen.

Warum also will Google so viele Schriften kostenlos zur Verfügung stellen? So ein CDN aufzubauen ist ja ganz schön teuer, was haben die davon?

Google’s Geschäftsmodell baut darauf auf, dass Google möglichst viele Informationen über die Internet-Nutzung sammelt. Wenn viele Web-Entwickler die Google-Schriften verwenden und über den Google-CDN in ihre Webseite einbinden, dann kann Google anhand der Zugriffe auf den Schriften-Server erkennen, wie oft und von welchen Webseiten die Schriften verwendet werden. Interessant für Google.

Wenn möglichst viele Webseiten die jeweils gleichen Schriften verwenden (nämlich Google Fonts), dann steigt die Chance an, dass ein Benutzer, der die Webseite besucht, die Schrift, die eine Webseite verwendet, schon auf seinem Computer installiert hat. Das sorgt für schnellere Webseiten-Ladezeiten für alle Webseiten die Google Fonts nutzen.

Jetzt gibt es aber auch Menschen, die z.B. Google aus Prinzip nicht mögen und denen nicht helfen wollen, mehr Daten über Schriftarten zu sammeln. Dann kann man auch einfach die CDN-Lösung nicht nutzen, die Schriften direkt herunterladen und “händisch” in die eigenen Webseiten einbinden. Funktioniert genauso gut, ist nur etwas langsamer und komplizierter als die CDN-Lösung.

Aber weil Google schlau ist, wissen die Leute die dort arbeiten auch, dass die meisten Web-Entwickler

  • gar nicht über solche Dinge nachdenken (wollen)
  • sich Arbeit ersparen wollen
  • die etwas schnellere Webseiten-Ladezeit ihrer Webseite schätzen

Selbst wenn 10% der Nutzer die “händische” Variante wählen, wovon Google erheblich weniger Vorteil hat, zahlt es sich für Google doch sehr aus, dieses Service anzubieten – darum machen die das auch.

3. Wie man in HTML Schriftarten einbindet

Nun werden wir lernen, wie wir in HTML zusätzliche Schriftarten einbinden. Dafür brauchen wir entweder einen Link zu der Schriftart-Datei auf einem anderen Server oder die Schriftart-Datei selbst. Da beide Varianten über Google Fonts möglich und rechtlich unbedenklich funktionieren, werden wir es mit Hilfe von Google Fonts versuchen. Du kannst aber deine Schriften natürlich auch aus anderen Quellen beziehen.

3.1 Eine Schriftart auf Google Fonts auswählen

Als erstes gehst du auf die Webseite www.fonts.google.com, dort findest du verschiedene Schriften zum Auswählen. Du kannst in den einzelnen Boxen einfach etwas Hineinschreiben und herausfinden wie die Schrift mit diesem Satz/diesem Wort aussehen wird:

HTML Schriftarten Google Fonts

Sobald du eine Schrift gefunden hast, die dir gefällt, klickst du einfach auf den Bereich mit dem Namen der Schrift, z.B. habe ich in meinem Fall auf die Schrift mit dem seltsamen Namen “Tenali Ramakrishna” geklickt. Dann öffnet sich eine detailliertere Beschreibung:

HTML Schriftarten Google Fonts 2

Bei dieser Schrift gibt es nur eine einzige Variante, bei anderen Schriften womöglich noch verschiedene Unter-Arten. Sobald du auf “+ Select this style” klickst, sollte sich rechts ein kleiner Bereich öffnen bei dem du alle bisher ausgesuchten Schriftarten angezeigt bekommst. Wenn das nicht klappt kannst du auch über das Symbol rechts oben mit den drei Vierecken und dem Plus den Bereich öffnen:

HTML Schriftarten Google Fonts 3

Ab jetzt gibt es zwei Möglichkeiten weiterzumachen. Entweder kannst du die Schrift herunterladen oder sie direkt über den Google-CDN in deine Webseite einbinden.

Weil die CDN-Variante einfacher ist, fangen wir mit dieser an:

3.2 Schriftarten in HTML einbinden über externe Quellen wie den Google-CDN

Wenn du nun in dem rechten Bereich auf “Embed” klickst, wird dir angezeigt wie du die Schriftart über den Google-CDN in deine HTML-Seite einbinden kannst:

HTML Schriftarten Google Fonts

Und zwar steht da etwas von “in den <head> unseres html kopieren”. Damit ist der <head>-Teil unserer HTML-Seite gemeint, dort wollen wir das Ganze gleich mal einfügen. Zur besseren Übersicht habe ich die Attribute rel und href vertauscht. Dann kannst du nämlich gleich sehen, dass das Einbinden von Schriften fast gleich funktioniert wie das Einbinden unserer style.css:

<head>
    <meta charset="utf-8">
    <title>Unser erstes Klapp-Menü</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Tenali+Ramakrishna&display=swap">
</head>

Was hier passiert, ist dass die beiden Schriften “Roboto” und “Tenali Ramakrishna” gemeinsam eingebunden werden. Das + zwischen Tenali und Ramakrishna ist deswegen wichtig, weil der Browser mit Leerzeichen in URLs nicht gut fertig wird.

Im Grunde brauchst du auch gar  nicht groß darüber nachdenken was in der URL steht, denn Google stellt dir ohnehin schon einen funktionierenden Code zur Verfügung. Freundlich von Google, nicht?

Wenn du aber z.B. Google nicht magst und lieber die kompliziertere Variante ohne Google-CDN wählen willst, geht das natürlich auch. Dazu musst du einfach statt auf “Embed” zu klicken in dem “Rewiew”-Bereich bleiben (bzw. darauf klicken).

Dann sehen wir uns nun mal an, wie wir Schriftarten direkt von unserem eigenen Server einbinden (bzw. sie überhaupt dorthin bringen).

3.3 Schriftarten in HTML einbinden über eine Schriftart-Datei auf dem eigenen Server

Nun kannst du in dem Bereich rechts ganz unten den Button “Download families” sehen und anklicken. Daraufhin kannst du eine .zip-Datei herunterladen in der die Schriftart-Dateien zu finden sind. Das sieht dann bei mir zum Beispiel so aus:

HTML Schriftarten Google Fonts 4

Das .zip-Format ist ein Format, in dem mehrere Dateien verkleinert verschickt und wieder geöffnet werden können. Falls du die Datei nicht öffnen kannst, brauchst du vielleicht ein dafür ausgelegtes zip-Programm wie WinZip. Bei mir heißt das Programm WinRar, darum sieht es vielleicht bei dir ein wenig anders aus.

Innerhalb deiner heruntergeladenen .zip-Datei solltest du nun einen oder mehrere Ordner mit Schriftart-Dateien darin finden. Diese Schriftart-Dateien (meist im Format .ttf oder .woff) kopierst du nun in den Ordner, in dem sich deinen index.html befindet. Wenn du Ordnung magst, kannst du die Schriftarten auch in einen Unter-Ordner dort packen, meistens wird der Schriften-Unterordner dann “fonts” genannt.

So, nun ist unsere Schriftart-Datei am passenden Ort, nämlich im Unterordner “fonts” in dem Ordner, in dem sich auch unsere Webseite befindet.

Dummerweise haben wir die Datei bisher nur im .ttf-Format, was für manche Browser zu wenig ist – die mögen das .woff-Format lieber. Was tun?

Freundlicherweise hilft uns da nun wieder eine andere Webseite weiter, die ein kostenloses Konvertierungs-Werkzeug bereitstellt, nämlich Fontsquirrel. Dort gibt es auch zahlreiche Schriften zum Herunterladen. Aber hier musst du eventuell aufpassen was die rechtlichen Bedingungen betrifft, nur so als Tipp 😉

Dort kannst du nun deine .tff-Datei hochladen, bei “Agreement” ein Häkchen setzen und einige Sekunden später bekommst du schon eine .zip-Datei mit allen relevanten Schriftart-Datei-Formaten zum Herunterladen. Die .tff-Datei deiner Schriftart hast du ja schon in deinem “fonts”-Ordner, nun fügst du noch die .woff-Datei der Schrift dazu.

So, geschafft!

Nun müssen wir die Datei nur noch einbinden. Das funktioniert etwas anders wie über den Google-CDN. Wir müssen dazu in unserer style.css ganz am Anfang den Befehl @font-face verwenden:

@font-face {
font-family: "Tenali";
src: url("./fonts/TenaliRamakrishna.ttf") format("truetype"),
	url("./fonts/TenaliRamakrishna.woff") format("woff");
}

Den Namen unter “font-family” kannst du frei wählen. Es ist der Name, den du dann später im HTML-Dokument verwenden wirst, um deinen HTML-Elementen diese Schrift zuzuweisen.

Die Pfade unter “url” müssen den realen Dateipfad enthalten, in meinem Fall befinden sich die beiden Dateien im Unterordner “fonts”. Die Dateinamen der Schriftart-Dateien habe ich so geändert, dass sie nicht allzu kompliziert geworden sind.

4. Wie man in HTML und CSS Schriftarten zuweist

Wenn wir unsere wunderschöne neue Schrift eingebunden haben, dann können wir sie nun einzelnen HTML-Elementen zuordnen. Das ist jetzt zum Glück nicht mehr allzu viel Arbeit und funktioniert mit einem einzigen CSS-Befehl, nämlich “font-family”:

body {
	margin: 0px;
	font-family: "Tenali";
}

Und nun sehen wir endlich unser Ergebnis:

HTML Schriftarten Google Fonts 7

Das “Ü” bei dem Gründer sieht ganz schön seltsam aus – das kann dir bei einigen Schriften im Zusammenhang mit Sonderzeichen und Umlauten passieren. Aber das ist uns jetzt erstmal egal.

Das Zuweisen von Schriften z.B. nur für Überschriften funktioniert dann ebenso einfach:

h1, h2, h3, h4, h5, h6 {
   font-family: "Tenali";
}

Profi-Tipp: Man kann auch mehreren HTML-Elemente zusammen eine ganze Liste an CSS-Befehlen zuweisen, indem man diese HTML-Elemente, IDs oder Klassen einfach durch einen Beistrich getrennt hintereinander schreibt, wie ich es gerade gemacht habe. Das freut den bequemen Programmierer 🙂

Versuch doch mal, unterschiedlichen HTML-Elementen unterschiedliche Schriften zuzuweisen! Und falls du dich nun fragst, wie das gehen soll, da wir doch bisher nur eine neue Schriftart eingebunden haben: dein Computer hat ja schon einige Schriftarten vorinstalliert, die kannst du auch verwenden wenn du den Befehl “font-family” benutzt.

Eigentlich ist es sogar sehr üblich, mit dem Befehl “font-family” gleich mehrere Schriften auf einmal zuzuweisen. Etwa so:

font-family: "Tenali", "Times New Roman", Times, serif;

Aber welche nimmt der Browser dann? Er nimmt die erste Schrift der Liste, die er im eigenen System findet, und geht die Liste bis nach hinten durch. In diesem Fall versucht er zuerst die “Tenali” zu finden, dann “Times New Roman”, dann irgendeine Times-Schriftart und am Ende verzweifelt er völlig und begnügt sich mit irgendeiner Serifen-Schrift.

Falls du dich nun fragst, ob der Browser nicht immer die Schriften findet die man mit dem Befehl “font-family” angibt: Nicht wirklich. Vielleicht hat der Programmierer ja z.B. vergessen, die Schrift einzubinden, oder es ging etwas bei der Einbindungn schief.

Wenn du nicht mehrere Schriften als Alternativen zur eigentlich gewünschten angibst, versucht der Browser das beste daraus zu machen und sucht sich selbst eine möglichst ähnliche aus.

Versuche auch, eine andere Schriftart von Google Fonts in deine Webseite einzubinden, damit du dich daran gewöhnst wie es funktioniert! Schaffst du es, deinen Überschriften eine andere Schrift zuzuweisen wie deinem restlichen Text?

Profi-Tipp: Im Normalfall wird empfohlen, für Webseiten nicht mehr als 2-3 Schriften zu verwenden. Erstens damit das Lesen für die Besucher nicht allzu verwirrend wird, aber auch damit das Laden der Webseite nicht allzu lange dauert.

Welche das sind, kannst du ja ab jetzt dann selbst bestimmen 🙂

In der nächsten Lektion wird es dann um Tabellen gehen, und dann geht’s schon sehr bald daran, unsere erste “richtige” eigene Webseite zu erstellen.

Bald, sehr bald wirst du soweit sein 🙂

Portrait Niklas Baumgärtler

Niklas Baumgärtler

Niklas Baumgärtler interessiert sich für die Kunst der Begeisterung und macht gerne Wechsel- und Hebelwirkungen in Sozialen Systemen sicht- und erlebbar. Mehr über Niklas Baumgärtler...

Über bunterrichten

bunterrichten ist ein Gegenkonzept zum sonst üblichen Unter-richten, das auf Anpassung und Unterordnung basiert. Stattdessen geht es darum, Menschen über Stimmigen Kontakt zur Entfaltung zu verhelfen - eben "Menschen helfen aufzublühen".

Niklas Baumgärtler ist Lehrer/Trainer und Werkzeugmacher für Webseiten und Soziale Systeme. Er ist seit Mai 2018 aus Überzeugung selbstständig, und vor allem in der Erwachsenen-Bildung tätig.