# 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-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. ## 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](https://www.ionos.at/digitalguide/websites/webdesign/webfonts-die-macht-moderner-schriftarten/) 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: ```html

Dies ist ein Text mit dem Roboto-Webfont.

``` Tipp In unserem Artikel „[Responsive Webdesign und Schrift: Webfont-Tipps](https://www.ionos.at/digitalguide/websites/webdesign/responsive-webdesign-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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tags/), die Sie für den Einsatz von Fonts in Ihren Webseiten verwenden können: `` und ``. Beide gelten allerdings seit der Einführung von [HTML5](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html5/) als überholt, weshalb die Bearbeitung der HTML-Schriftarten über [CSS](https://www.ionos.at/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/) empfohlen wird. ### `` Das Tag `` wird genutzt, um HTML Fonts auszuwählen und zu definieren. Mithilfe verschiedener [HTML-Attribute](https://www.ionos.at/digitalguide/websites/web-entwicklung/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](https://www.ionos.at/digitalguide/websites/webdesign/rgb-farben/) 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 `` sieht folgendermaßen aus: ```html .... ``` Folgendes Code-Beispiel zeigt den Einsatz des Tags: ```html HTML font Tag Dies ist ein Beispieltext. ``` ### `` Ganz ähnlich funktioniert das Tag ``. Es definiert die HTML Font Family und ihre Spezifikationen aber immer für das gesamte HTML-Dokument. Seine Attribute entsprechen denen des ``-Tags. Die Syntax: ```html .... ``` Folgendes Beispiel verdeutlicht die Font-Auszeichnung mit dem ``-Tag: ```html HTML font Tag Dies ist ein Beispieltext. ``` ## 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: ```html Schriftgröße Die Schriftgröße ist = "1"
Die Schriftgröße ist = "2"
Die Schriftgröße ist = "3"
Die Schriftgröße ist = "4"
Die Schriftgröße ist = "5"
Die Schriftgröße ist = "6"
Die Schriftgröße ist = "7" ``` So legen Sie die Farbe fest: ```html Schriftfarbe Dieser Text ist Petrol.
Dieser Text ist Dunkelrot. ``` Hier wählen wir die passende HTML Fonts Family: ```html HTML Fonts Family Lucida Console
``` Sollte ein Besucher oder eine Besucherin Ihrer Website die jeweilige HTML Fonts Family nicht installiert haben, wird stattdessen eine Standardschrift angezeigt. This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-fonts/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-fonts/) for AI/LLM consumption.