Welche Schriftarten kennt HTML?
Haben Sie sich schon mal gefragt, welche Schriftarten Sie unter HTML einsetzen können? Wir erklären es Ihnen kurz und bündig.
- Anna Kalinowsky
Wenn Sie eine Webseite professionell erstellen wollen, müssen Sie sich Gedanken über die zu verwendenden Schriftarten machen. Wir sagen Ihnen, welche Fonts HTML von sich aus verwendet, wie Sie weitere integrieren können und was Sie beachten müssen.
Kleines Schriften-Einmaleins
Schriftarten sind ein wichtiger Punkt beim Webdesign. Denn von der Schrift hängt es ab, wie eine Webseite auf den Nutzer wirkt und ob er sie überhaupt lesen kann. Denn im Vergleich zum Print-Design müssen Sie fürs Webdesign die vielen verschiedenen Monitore und Mobilgeräte berücksichtigen, deren Auflösung zum Beispiel 4K, HD oder nur VGA betragen kann.
Schriften mit Serifen wie "Times" und "Times New Roman" eignen sich auf Bildschirmen mit geringer Auflösung eher schlechter als jene ohne Serifen wie Arial und Verdana. Die Fonts befinden sich entweder auf dem Computer der Nutzer oder müssen von Ihnen mitgeliefert werden. Ist letzteres der Fall, müssen Sie unbedingt die Lizenz beachten. Denn neben kostenlosen Open-Source-Fonts gibt es auch kostenpflichtige Schriftarten.
Vorhandene HTML-Schriftarten
HTML bringt selbst keine Schriften mit. Die Browser nutzen jene, die auf dem Computer des Website-Besuchers vorinstalliert sind. Das ist unter Windows standardmäßig "Times New Roman", wenn keine andere Schrift im HTML/CSS-Code vorgegeben ist. Grundsätzlich kann es je nach genutztem Betriebssystem Abweichungen geben, da bei Windows, Linux und macOS durchaus unterschiedliche Schriften installiert sind.
Wollen Sie für einen Abschnitt eine Schriftart konkret vorgeben, sollten Alternativen hinzugefügt werden, falls die Gewünschte nicht auf dem Rechner installiert ist. So wird durch den folgenden CSS-Eintrag "Times New Roman" unter Windows als Schrift verwendet und alternativ "Times" unter Linux, da hier "Times New Roman" standardmäßig nicht installiert ist:
p { font-family: "Times New Roman", Times, serif; }
Findet der Browser keine der angegebenen Fonts, nutzt er eine Ähnliche.
HTML um Fonts ergänzen
Bei der Gestaltung Ihrer Webseite sind Sie nicht mehr alleine auf Schriften angewiesen, die auf dem Computer des Betrachters installiert sind. Denn in eine HTML-Seite lassen sich Schriftarten auch einbetten, die online erreichbar sind. So finden Sie zum Beispiel bei Google Fonts kostenlose Open-Source-Designer-Web-Fonts, die Sie ohne Lizenzkosten nutzen dürfen.
Das folgende Beispiel zeigt die Integration der Schrift "Roboto" in eine Webseite. Den Link zu dem Font fügen Sie im Kopf der Webseite zwischen <head> und </head> ein:
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
Mithilfe von CSS weisen Sie dann den Abschnitten die zu verwendende Schriftart zu. Soll etwa "Roboto" die Standard-Schriftart bei allen Absätzen sein, schreiben Sie einfach den folgenden Eintrag in eine CSS-Datei oder integrieren ihn zwischen den Tags <style type="text/css"> und </style> im Kopfbereich der HTML-Seite:
p { font-family: "Roboto", sans-serif; }
Liegen die Definitionen in einer externen CSS-Datei, dann müssen Sie diese Datei noch im Kopfbereich der HTML-Seite einbinden:
<link rel="stylesheet" type="text/css" href="FontDatei.css">
Beispiel1
<!DOCTYPE html>
<html>
<head>
<title>Externe Fonts integrieren</title><meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
<style type="text/css">
p { font-family: "Roboto", sans-serif; }
</style>
</head>
<body>
<h1>Überschrift im Standard-Font des Browsers</h1>
bla fasel
<p>Dieser Text wird in der Schriftart "Roboto" ausgegeben.</p>
</body>
</html>
(anka)
