HTML ändern · Anleitung

HTML: Schriftart, Schriftgröße und Schriftfarbe ändern

Kurz gesagt: Schrift, Größe und Farbe werden in HTML nicht mit HTML-Tags gesetzt, sondern mit CSS — drei Eigenschaften reichen: font-family für die Schriftart, font-size für die Größe, color für die Farbe. Du schreibst sie in den <style>-Bereich im Kopf der Datei. Das alte <font>-Tag ist seit HTML5 abgeschafft und wirkt nicht mehr.

Alles drei auf einmal, für die ganze Seite

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.125rem;
    color: #1a1a2e;
  }
</style>

Diese fünf Zeilen gehören in den Kopf der Datei, zwischen <head> und </head>. Ab dann gilt die Einstellung für den ganzen Text der Seite — außer an den Stellen, die eine eigene Regel haben.

Schriftart ändern: `font-family`

Die Schriftart setzt du mit font-family. Der Wert ist keine einzelne Schrift, sondern eine Liste — und das hat einen wichtigen Grund.

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

Der Browser geht die Liste von links nach rechts durch und nimmt die erste Schrift, die auf dem Gerät des Besuchers vorhanden ist. Deshalb gelten drei Regeln:

Immer eine Ersatzschrift angeben. Steht nur eine Schrift da und fehlt sie, nimmt der Browser eine beliebige eigene — und dein Layout verschiebt sich.
Am Ende eine allgemeine Familie. sans-serif für Schriften ohne Serifen, serif für Schriften mit Serifen, monospace für Schreibmaschinenschrift. Diese gibt es auf jedem Gerät.
Namen mit Leerzeichen in Anführungszeichen. "Times New Roman" braucht sie, Georgia nicht.

Nur eine einzelne Stelle ändern

Wenn nicht die ganze Seite, sondern nur eine Überschrift eine andere Schrift bekommen soll, schreibst du die Regel für dieses Element:

<style>
  h1 { font-family: Georgia, serif; }
</style>

Oder direkt am Element, wenn es wirklich nur um diese eine Stelle geht:

<p style="font-family: Georgia, serif;">Dieser Absatz ist anders.</p>

Das <font>-Tag funktioniert nicht mehr. Ältere Anleitungen zeigen <font face="Arial">Text</font>. Dieses Tag wurde mit HTML5 aus dem Standard entfernt. Manche Browser zeigen es aus Rücksicht auf alte Seiten noch an, verlässlich ist es nicht. Wenn eine Anleitung dir das <font>-Tag empfiehlt, ist sie veraltet — nimm CSS.

Eine Schrift, die nicht auf dem Gerät ist

Schriften wie Inter oder Montserrat sind auf normalen Geräten nicht installiert. Damit sie erscheinen, muss die Seite sie mitladen — bei Google Fonts über zwei Zeilen im Kopf der Datei:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

Erst danach wirkt font-family: Inter, sans-serif;. Das ist der häufigste Grund, warum eine Schrift „nicht geht": Sie ist gar nicht da.

Datenschutz-Hinweis: Schriften direkt von Google zu laden überträgt die IP-Adresse deiner Besucher an Google. Wenn dir das nicht passt, lade die Schriftdateien herunter und binde sie von deinem eigenen Server ein — oder bleib bei den Schriften, die auf jedem Gerät vorhanden sind.

Schriftgröße ändern: `font-size`

font-size: 18px;      /* feste Größe */
font-size: 1.125rem;  /* 18px, skaliert mit der Nutzer-Einstellung */
font-size: 1.2em;     /* 20 % größer als das umgebende Element */

Die Einheit ist hier die eigentliche Entscheidung:

Einheit	Bezieht sich auf	Gut für
`px`	feste Bildpunkte, ändert sich nie	Feinheiten, bei denen genau eine Größe gilt
`rem`	die Grundschriftgröße des Dokuments (meist 16 px)	Text auf Webseiten — die robusteste Wahl
`em`	die Schriftgröße des umgebenden Elements	Abstände, die mit der Schrift mitwachsen
`%`	die Schriftgröße des umgebenden Elements	wie `em`, nur anders geschrieben

Warum rem die bessere Wahl ist: Wer schlecht sieht, stellt im Browser eine größere Grundschrift ein. Bei px passiert dann nichts — der Text bleibt klein. Bei rem wächst er mit. 1rem sind standardmäßig 16 Pixel, 1.5rem also 24 Pixel.

Vorsicht bei em: Es bezieht sich auf das umgebende Element und multipliziert sich dadurch. Steht 1.2em in einer Liste, die selbst in einer Liste mit 1.2em steckt, ist der Text 1,44-mal so groß — nicht 1,2-mal. Das ist der klassische Grund für Text, der immer größer wird.

Schriftfarbe ändern: `color`

color: #7c5cff;              /* Hex */
color: rgb(124, 92, 255);    /* RGB */
color: rebeccapurple;        /* Farbname */

Ein Punkt, der oft verwechselt wird: color färbt den Text. background-color färbt die Fläche dahinter. Wer die Textfarbe ändern will und background-color nimmt, bekommt einen farbigen Kasten.

Mehr zu Farbwerten, Hex, RGB und Flächenfarben steht auf Hintergrundfarbe und Farbwerte ändern.

Lesbarkeit: Hellgrauer Text auf weißem Grund sieht auf deinem Bildschirm gut aus und ist auf einem Handy in der Sonne nicht mehr lesbar. Als Richtwert gilt ein Kontrastverhältnis von mindestens 4,5 zu 1 zwischen Text und Hintergrund — das ist der Wert, den die Barrierefreiheits-Richtlinien für normalen Text vorgeben.

Fett, kursiv und Ausrichtung

font-weight: 700;        /* fett — 400 ist normal */
font-style: italic;      /* kursiv */
text-align: center;      /* zentriert — auch left, right, justify */
text-decoration: underline;   /* unterstrichen */
line-height: 1.7;        /* Zeilenabstand */

Bei font-weight sind Zahlen von 100 bis 900 möglich, in Hundertern. 400 ist normal, 700 ist fett. Ob eine Zwischenstufe wie 500 wirkt, hängt davon ab, ob die Schrift diese Stärke mitbringt — sonst rundet der Browser auf die nächste vorhandene.

Unterstrichener Text auf Webseiten: Besucher halten unterstrichenen Text für einen Link und klicken darauf. Wenn du etwas hervorheben willst, nimm besser fett oder eine andere Farbe.

Die vier Gründe, warum deine Änderung nicht wirkt

Eine andere Regel gewinnt. Bei gleicher Genauigkeit gilt die Regel, die weiter unten in der Datei steht. Ein style-Attribut direkt am Element gewinnt gegen jede Regel im <style>-Bereich.
Die Regel trifft das falsche Element. Du hast body geändert, aber die Überschrift hat ihre eigene h1-Regel — und die gilt.
Ein Zeichen fehlt. Ein vergessenes Semikolon oder eine fehlende geschweifte Klammer legt alle folgenden Zeilen still.
Der Browser zeigt den alten Stand. Neu laden mit gedrückter Umschalttaste.

Dasselbe ohne Code: anklicken statt tippen

Alles oben beschriebene ist der Code-Weg. Wenn du deine Seite mit KI gebaut hast und nicht programmieren willst, gibt es den zweiten: PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten. Du ziehst deine HTML-Datei ins Tool, klickst den Text an und wählst Schrift, Größe und Farbe im Menü — und lädst die fertige Datei wieder herunter.

Im Code

<style>-Bereich finden, richtige Regel finden, font-family, font-size und color schreiben, speichern, neu laden, prüfen, ob eine andere Regel gewinnt.

Per Klick

Datei reinziehen, Text anklicken, Schrift und Größe wählen, Farbe wählen — einzelne Wörter per Doppelklick. Eine Pipette nimmt eine vorhandene Farbe deiner Seite auf, damit die neue dazu passt. Datei herunterladen.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Wie ändere ich die Schriftart in HTML?

Über die CSS-Eigenschaft font-family, zum Beispiel font-family: Arial, sans-serif; — entweder zentral im <style>-Bereich im Kopf der Datei für die ganze Seite oder direkt am Element als style-Attribut für eine einzelne Stelle. Das frühere <font>-Tag mit dem face-Attribut ist seit HTML5 abgeschafft und wirkt nicht mehr zuverlässig.

Wie ändere ich die Schriftgröße in HTML?

Über die CSS-Eigenschaft font-size, zum Beispiel font-size: 18px; für eine feste Größe oder font-size: 1.125rem; für eine Größe, die sich an der Grundeinstellung des Nutzers orientiert. Für Text auf Webseiten ist rem die robustere Einheit.

Wie ändere ich die Schriftfarbe in HTML?

Über die CSS-Eigenschaft color, zum Beispiel color: #7c5cff;. Wichtig: color färbt den Text, background-color färbt die Fläche dahinter.

Warum wirkt meine Schriftart nicht?

Meistens aus einem von drei Gründen: Die Schrift ist auf dem Gerät nicht installiert und es gibt keine Ersatzschrift; eine andere CSS-Regel setzt font-family weiter unten noch einmal und gewinnt dadurch; oder ein Schriftname mit Leerzeichen steht ohne Anführungszeichen. Bei Google Fonts fehlt außerdem oft die Einbindung im Kopf der Datei.

Was ist der Unterschied zwischen px, rem und em?

px ist eine feste Größe und ändert sich nie. rem richtet sich nach der Grundschriftgröße des Dokuments, üblicherweise 16 Pixel — 1.5rem sind damit 24 Pixel. em richtet sich nach der Schriftgröße des umgebenden Elements und kann sich dadurch verschachteln. Für Text auf Webseiten ist rem die beste Wahl.

Wie ändere ich Schrift und Farbe ohne Code?

In einem Klick-Editor wie PageFix: HTML-Datei ins Tool ziehen, Text anklicken, Schrift, Größe und Farbe im Menü wählen, fertige Datei herunterladen. Einzelne Wörter lassen sich per Doppelklick treffen, und eine Pipette nimmt vorhandene Farben der Seite auf.

Jetzt starten

Erst ausprobieren? Öffne die Demo — der echte Editor, ohne Konto.

Zuletzt aktualisiert: 11. September 2026

← Zurück zur Startseite und PageFix ansehen