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.

Top-Hosting für Ihre Website
Webhosting
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

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>
html
Tipp

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>
html

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>
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>
html

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>
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>
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>
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>
html

Sollte ein Besucher oder eine Besucherin Ihrer Website die jeweilige HTML Fonts Family nicht installiert haben, wird stattdessen eine Standardschrift angezeigt.

Registrieren Sie Ihre perfekte Domain
Domain kaufen
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?