HTML Fonts: So setzen Sie websichere Schriftarten ein
Mit HTML Fonts verleihen Sie den Textinhalten auf Ihren Webseiten eine individuelle Note. Für die bestmögliche Nutzerfreundlichkeit sollten Sie dabei unbedingt auf websichere Schriften setzen.
Welche HTML Fonts gibt es?
In der Theorie gibt es eine riesige Anzahl an verschiedensten HTML Fonts. Da HTML selbst keine Schriftart zur Verfügung stellt, können Sie im Prinzip jede Schriftart für Ihre Webseiten nutzen, insofern Sie diese korrekt hochladen und konfigurieren. Hierbei können allerdings verschiedene Probleme auftreten: Insbesondere verschnörkelte oder kleinteilige Schriften werden häufig nicht wie gewünscht wiedergegeben. Das wirkt sich nicht nur negativ auf das Design der Seiten aus, sondern schmälert auch die Lesbarkeit. Auch wenn eine HTML-Schriftart nicht auf dem Rechner der zugreifenden User installiert ist, kann es zu Problemen kommen.
- 3x schneller und 60 % günstiger
- Maximale Verfügbarkeit mit > 99.99 %
- Nur bei IONOS: Bis zu 500 GB Speicherplatz inklusive
Websichere HTML Fonts
Wenn Sie auf der Suche nach geeigneten Fonts für Ihre Website sind, sollten Sie auf websichere Schriftarten zurückgreifen. Diese sind auf den meisten Systemen vorinstalliert oder als Webfonts über öffentliche Server verfügbar. Dies gewährleistet, dass es bei der Wiedergabe keine Probleme gibt und Ihre Website in verschiedenen Browsern und Betriebssystemen einheitlich dargestellt wird.
Websichere Schriftarten
Websichere Schriftarten sind solche, die auf den meisten Geräten und Betriebssystemen vorinstalliert sind. Zu den bekanntesten websicheren Schriftarten gehören:
- Arial
- Courier New
- Helvetica
- Times New Roman
- Georgia
- Verdana
Diese Schriftarten sind weit verbreitet und bieten eine hohe Kompatibilität.
Webfonts
Zusätzlich zu den vorinstallierten Schriftarten können Sie auch Webfonts verwenden. Webfonts werden von öffentlichen Servern geladen und bieten eine große Auswahl an typografischen Stilen. Ein bekannter Anbieter von Webfonts ist Google Fonts. Durch die Verwendung von Webfonts können Sie das Design Ihrer Website individualisieren, ohne die Kompatibilität zu beeinträchtigen. Hier ein Beispiel, wie Sie einen Webfont einbinden können:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Dies ist ein Text mit dem Roboto-Webfont.</p>
</body>
</html>In unserem Artikel „Responsive Webdesign und Schrift: Webfont-Tipps“ gehen wir genauer auf die Funktionsweise und Vorteile von Webfonts ein.
Welche Tags für die Nutzung von HTML Fonts gibt es?
Es gibt zwei HTML-Tags, die Sie für den Einsatz von Fonts in Ihren Webseiten verwenden können: <font> und <basefont>. Beide gelten allerdings seit der Einführung von HTML5 als überholt, weshalb die Bearbeitung der HTML-Schriftarten über CSS empfohlen wird.
<font>
Das Tag <font> wird genutzt, um HTML Fonts auszuwählen und zu definieren. Mithilfe verschiedener HTML-Attribute können Sie die Farbe, die Größe und die Schriftart definieren. Dies sind die Attribute und ihre zulässigen Werte:
| Attribut | Werte | Beschreibung |
|---|---|---|
color
|
Farbname, Hex-Farbcode oder RGB-Werte | Bestimmt die Farbe des Textes |
size
|
Zahlenwert von 1 bis 7 | Bestimmt die Größe der HTML Fonts |
face
|
Namen der HTML-Schriftarten | Hinterlegt die gewünschte HTML Font Family |
Die Syntax von <font> sieht folgendermaßen aus:
<font size=" " color=" " face=" "> ....</font>Folgendes Code-Beispiel zeigt den Einsatz des Tags:
<!DOCTYPE html>
<html>
<head>
<title>HTML font Tag</title>
</head>
<body>
<font size="3" color="0000FF" face="arial, sans-serif">
Dies ist ein Beispieltext.
</font>
</body>
</html><basefont>
Ganz ähnlich funktioniert das Tag <basefront>. Es definiert die HTML Font Family und ihre Spezifikationen aber immer für das gesamte HTML-Dokument. Seine Attribute entsprechen denen des <font>-Tags. Die Syntax:
<basefont size=" " color=" " face=" "> ....</font>Folgendes Beispiel verdeutlicht die Font-Auszeichnung mit dem <basefont>-Tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML font Tag</title>
</head>
<body>
<basefont size="3" color="0000FF" face="arial, sans-serif">
Dies ist ein Beispieltext.
</font>
</body>
</html>Schriftgröße, Schriftfarbe und HTML Fonts Family festlegen
Seit HTML5 werden die beiden oben genannten Tags nicht länger verwendet. Trotzdem können Sie natürlich HTML Fonts für Ihre Website nach eigenen Vorstellungen definieren. Wenn Sie die Größe der Schrift einstellen möchten, geschieht das wie im folgenden Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<title>Schriftgröße</title>
</head>
<body>
<font size = "1">Die Schriftgröße ist = "1"</font><br />
<font size = "2">Die Schriftgröße ist = "2"</font><br />
<font size = "3">Die Schriftgröße ist = "3"</font><br />
<font size = "4">Die Schriftgröße ist = "4"</font><br />
<font size = "5">Die Schriftgröße ist = "5"</font><br />
<font size = "6">Die Schriftgröße ist = "6"</font><br />
<font size = "7">Die Schriftgröße ist = "7"</font>
</body>
</html>So legen Sie die Farbe fest:
<!DOCTYPE html>
<html>
<head>
<title>Schriftfarbe</title>
</head>
<body>
<font color = "#008080">Dieser Text ist Petrol.</font><br />
<font color = "#8B0000">Dieser Text ist Dunkelrot.</font>
</body>
</html>Hier wählen wir die passende HTML Fonts Family:
<!DOCTYPE html>
<html>
<head>
<title>HTML Fonts Family</title>
</head>
<body>
<font face = "Lucida Console" size = "5">Lucida Console</font><br />
</body>
</html>Sollte ein Besucher oder eine Besucherin Ihrer Website die jeweilige HTML Fonts Family nicht installiert haben, wird stattdessen eine Standardschrift angezeigt.
- Inklusive 1 SSL-Wildcard-Zertifikat pro Vertrag
- Inklusive Domain Lock
- Inklusive Domain Connect für einfache DNS-Einrichtung