Wenn es eine Sache gibt, die für das Branding und das Erscheinungsbild deiner Webseite am wichtigsten ist, dann sind es die Schriftarten. Eine sorgfältig gewählte Schriftart kann Persönlichkeit vermitteln, lange Textpassagen besser lesbar machen und deine Marke in den Köpfen der Menschen verankern.

Aber du kannst nicht einfach irgendeine alte Schriftart herunterladen und sie auf deiner Webseite verwenden. Es gibt einige Dinge zu beachten.

Wo findest du Webfonts, welche Fonts sind mit HTML kompatibel und welche sind „websicher“ und können auf jeder Webseite verwendet werden? Wir werden sie alle in diesem Artikel erkunden.

Lasst uns beginnen!

HTML Fonts: Was sind Web Fonts?

Schriftarten haben eine lange Geschichte, aber Schriften, wie wir sie heute kennen, kamen mit dem Aufkommen von Computern und dem Internet in den breiten Gebrauch. Digitale Schriftarten mussten speziell behandelt werden, um auf Bildschirmen dargestellt werden zu können. Und als verschiedene Bildschirmgrößen und Geräte ins Spiel kamen, wurden die Dinge nur noch komplizierter.

Google Fonts sind eine Sammlung von trendigen Web Fonts

Google Fonts sind eine Sammlung von trendigen Web Fonts

Wenn es um digitale Schriftarten geht, gibt es ein paar verschiedene Arten. Einige Schriften sind vor allem für den Druck und das Grafikdesign gedacht. Diese sind in der Regel groß und ungeeignet für Webseiten, eignen sich aber perfekt für die Erstellung von Grafiken. Es gibt auch „websichere“ Schriftarten, die auf einem Großteil aller Geräte zu finden sind.

Für das Webdesign musst du jedoch nach Webfonts Ausschau halten, also nach Schriften, die speziell für die perfekte Darstellung im Web und auf verschiedenen Geräten entwickelt wurden. Du kannst Web-Fonts auch in E-Mails oder anderen Online-Diensten verwenden.

Es gibt ein paar Dinge, die Webfonts von den Standardschriften zum Herunterladen unterscheiden. Zum einen können sie oft nicht mit Programmen auf deinem Computer verwendet werden; sie müssen auf einen Server hochgeladen und im Internet verwendet werden.

Sie sind außerdem so konzipiert, dass sie auf verschiedenen Bildschirmen und in verschiedenen Größen lesbar sind. Sie können mit CSS gestylt werden (z.B. mit Fett- oder Kursivschrift, Farben und anderen Attributen) und bieten Unterstützung für andere Bedingungen wie die Darstellung von rechts nach links.

Während Webfonts nicht auf deinen Geräten oder denen deiner Besucher installiert werden, gibt es spezielle Möglichkeiten, sie anzuzeigen, damit jeder, der deine Seite besucht, sie sehen kann.

Du kannst diese Schriftarten entweder ganz normal herunterladen und auf deinen Server hochladen oder einen speziellen Web Font Hosting Service nutzen, der sie auf deiner Seite einbettet, ohne dass ein Download erforderlich ist.

Wenn dir das Branding und das Erscheinungsbild deiner Seite wichtig sind, dann ist die Verwendung einer websicheren Schriftart ein wichtiger Schritt in deinem Designprozess. ✨ Finde 10 großartige Optionen gleich hier 👇Click to Tweet

Welche Fonts kannst du in HTML verwenden?

Einige Schriftarten sind nicht für das Web gedacht, aber welche können in deine HTML Seite eingefügt werden?

Im Grunde kannst du jede herunterladbare Schriftart auf deiner Seite verwenden. Du musst sie nur hochladen und richtig konfigurieren, dann sollte sie auf deiner Webseite angezeigt werden.

Scribble Font ist nicht praktisch für Webseiten

Scribble Font ist nicht praktisch für Webseiten

Aber obwohl du technisch gesehen jede Schriftart auf deiner Seite verwenden kannst, ist das nicht immer die beste Idee. Du solltest speziell nach Web-Fonts suchen, nicht nach Fonts, die für den Druck oder das Grafikdesign gedacht sind. Manche Schriften sind so stilisiert oder für so große Textgrößen gedacht, dass sie auf deiner Seite nicht richtig dargestellt werden können. Bei einer Webschriftart ist das kein Problem.

Bei der Verwendung von Desktop-Schriften auf deiner Seite (oder bei der Verwendung von Web-Fonts für das Druckdesign) gibt es auch lizenzrechtliche Fragen zu klären. Eine Schriftart in einem anderen Medium zu verwenden, als du sie gekauft hast, kann dich in Schwierigkeiten bringen. Achte darauf, die Lizenz deiner Schriftart sorgfältig zu lesen, bevor du sie kaufst.

Du kannst auch bestimmte Hosts ausfindig machen, die es dir erlauben, einen einfachen Aufruf im HTML zu verwenden, um ihre Schriften auf deiner eigenen Webseite zu rendern, entweder durch kostenlose oder bezahlte Pläne.

So oder so, solange die Schriftart, die du verwendest, richtig hochgeladen ist und den richtigen Dateityp hat:

Mit diesen Schriftarten kannst du sie dann auf deiner ganzen Seite verwenden und mit HTML und CSS gestalten.

Es gibt auch websichere Schriftarten, die in der Regel universell in allen Browsern und Programmen funktionieren.

Was sind websichere Schriftarten?

Ein Problem mit den meisten Web Fonts ist, dass es keine Garantie gibt, dass sie auf deiner Webseite richtig angezeigt werden. Anders als beim Grafikdesign, wo du einfach ein Bild in einem Programm erstellen und es zur Verteilung ausdrucken kannst, muss ein Browser Webfonts jedes Mal rendern, wenn jemand die Seite öffnet. Wenn deine Schriftarten nicht geladen werden, kann es passieren, dass du eine leere, kaputte Webseite hast.

Aus diesem Grund entscheiden sich einige Webseiten-Besitzer dafür, sich nur auf websichere Schriftarten zu verlassen. Diese sind auf den meisten Systemen vorinstalliert, sodass sie garantiert auf allen Geräten korrekt angezeigt werden. Außerdem laden sie in der Regel viel schneller als Webfonts, die nur langsam angezeigt werden können.

Arial ist eine gängige websichere Schriftart

Arial ist eine gängige websichere Schriftart

Wenn es dir nur darum geht, die Performance zu maximieren und absolut sicher zu gehen, dass deine Seite die Schriftarten korrekt anzeigt, dann sind websichere Schriftarten das Richtige für dich.

Hier ist eine Liste von websicheren Schriftarten, die im Allgemeinen gut zu verwenden sind.

Es gibt noch Dutzende weiterer websicherer Schriftarten, aber diese sind auf allen Geräten am weitesten verbreitet.

Von all diesen sind Arial, Times New Roman, Helvetica und Courier New die sichersten. Obwohl sie als websicher gelten, funktionieren einige der anderen auf bestimmten Betriebssystemen nicht.

Das Problem ist, dass es sich nicht lohnt, dein Branding zu opfern, indem du die meisten Schriften vermeidest, es sei denn, du betreibst so etwas wie eine Regierungsseite oder eine einfache Informationsseite. Websafe-Schriften sind zwar lesbar, aber sie sind auch zu generisch und werden zu oft verwendet.

Es ist viel besser, einen schöneren, einzigartigeren Satz von Schriftarten für deine Webseite zu wählen, vor allem, da es eine Lösung für das Problem der nicht ladenden Web Fonts gibt: Fallback Fonts.

Ein Hinweis zu Font Stacks

Font Stacks, auch bekannt als Fallback Fonts, sind der einzige Grund, um fette und kreative Web Fonts zu verwenden.

Egal was du tust oder welche Vorkehrungen du triffst, es wird immer jemanden geben, der deine Schriften nicht laden kann. Vielleicht haben sie Javascript deaktiviert, so dass deine gehosteten Fonts nicht richtig gerendert werden, oder irgendetwas läuft im Code schief und verhindert, dass die von dir hochgeladenen Fonts angezeigt werden. Oder vielleicht ist eine bestimmte Schriftart nicht mit dem Gerät des Nutzers kompatibel.

Dank der Fallback-Fonts ist es einfach, eine websichere Schriftart zu laden, wenn etwas schief läuft. Das funktioniert, indem du eine Schriftart auswählst, die der Nutzer installiert hat, basierend auf der Schriftfamilie:

Denke daran, dass Font Stacks tatsächlich ein „Stack“ sind; es ist durchaus möglich, mehrere Fallback-Fonts in Folge zu haben. Achte nur darauf, dass du immer eine websichere Schriftart am Ende des Stacks hast und du immer noch eine Chance hast, dein Branding mit einer ähnlichen Schriftart zu vermitteln, wenn die Hauptschriftart ausfällt.

Wie man Fonts mit HTML hinzufügt

Wenn du eine Webschriftart auf deiner Seite einfügen möchtest, hast du einige Möglichkeiten.

Für WordPress-Nutzer ist der einfachste Weg, Schriftarten auf deine Seite zu bekommen, ein Plugin zu verwenden. Die zwei beliebtesten sind Easy Google Fonts und Use Any Font. Ersteres vereinfacht das Hinzufügen von Google Fonts auf deiner Webseite, während UAF es dir ermöglicht, Schriften direkt auf deine Seite hochzuladen.

Wenn du kein WordPress verwendest oder dich nicht auf ein Plugin verlassen willst, wird der Prozess einige manuelle Eingriffe erfordern.

Zunächst kannst du Schriftarten verwenden, die woanders gehostet werden, wie z.B. bei Google Fonts. Die Anleitung dazu hängt davon ab, welchen Dienst du wählst. Bei Google Fonts müsstest du die Schriftart, die du verwenden willst, in deinen <head> einbetten und dann aufrufen, wenn du sie verwenden willst.

Du kannst Schriftarten, die du aus dem Internet heruntergeladen hast, auch lokal auf deiner Webseite hosten. Das kann vorteilhaft sein, weil du dich dann nicht auf Drittanbieterdienste verlassen musst.

Glücklicherweise ist dies sehr einfach zu bewerkstelligen, solange du eine richtig konfigurierte Webschrift hast. Lade die Dateien einfach auf deinen Server hoch und benutze dann die @font-face Regel in deinem Stylesheet, um sie zu definieren. Zum Beispiel:


@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Dann kannst du den font-family-Tag verwenden, um deine Schriftart dort aufzurufen, wo du sie im HTML-Dokument haben möchtest.

Schriftarten mit HTML und CSS stylen

Sobald deine Schrift sicher auf deiner Webseite hochgeladen ist, kannst du sie mit HTML und CSS stylen. Selbst wenn du nur wenig Programmierkenntnisse hast, ist das Styling einer Schriftart ziemlich einfach. Du kannst die Textfarbe, die Hintergrundfarbe, die Größe, den Stil oder das Gewicht ändern.

Hinweis: Wenn du mit älteren HTML-Versionen gearbeitet hast, erinnerst du dich vielleicht an den <font>-Tag. Dieser wird nicht mehr unterstützt und sollte nicht mehr verwendet werden. Stattdessen kannst du Text mit CSS oder einem HTML-Style-Element stylen.

Als erstes kannst du die Schriftart mit Farbcodes ändern. Du kannst entweder einen Farbnamen wie „red“, einen RGB-Code oder einen HEX-Wert verwenden. Dieser wird mit der Eigenschaft color wie folgt gesetzt:


p {

color: blue;

}

Oder in einem individuellen HTML-Style-Element:


<p style="color:blue;">Text.</p>

Die Hintergrundfarbe ist die selbe, aber mit dem Attribut background-color.


p {

background-color: blue;

}

Als nächstes kommt die Schriftgröße. Diese kann entweder in Pixeln, Prozenten oder ems angegeben werden (was gut für die Gestaltung von responsive Seiten ist).

 p {

font-size: 16px;

}

oder:

<p style="font-size:200%;">Text.</p>
Einstellen der Schriftgröße mit CSS

Einstellen der Schriftgröße mit CSS

Und zuletzt sind Schriftart und -stärke, oder kursiv und fett. Für schrägen Text benutze den „italic“ Tag.

.italic {

font-style: italic;

}

And for bold: 

.bold {

font-weight: bold;

}
Einstellen des Schriftstils mit CSS.

Einstellen des Schriftstils mit CSS.

Du kannst stattdessen auch HTML-Tags verwenden. Für Kursivschrift kannst du verwenden:

<em>

für einen Text, der eine Betonung oder einen Gebrauch vermittelt:

 <i> 

für einen Text, der visuell deutlich sein soll.

Und für fett, benutze:

<b> or <strong>

Zum Beispiel:

<b>Bold Text</b>

oder

<strong>I'm of special importance.</strong>

Wo bekommt man HTML Fonts?

Egal, ob du einen Third-Party Font Host nutzen oder sie herunterladen möchtest, du musst wissen, wo die besten Orte sind, um Fonts zu finden. Es gibt hunderte von Distributoren, aber nur eine gute Handvoll sind als zuverlässige Quellen für Schriften bekannt. Hier sind ein paar:

Hostest du deine eigenen Fonts? Unser Performance-optimiertes Hosting beinhaltet ein CDN, das HTTP/2 unterstützt, mit kostenloser Bandbreite inklusive. Schau dir unsere Pläne

google fonts

Google Fonts

Die 10 besten HTML Fonts

Es gibt tausende von Web Fonts da draußen, aber wo soll man anfangen? Hier sind zehn einfache HTML Fonts, die auf jeder Webseite gut aussehen würden. Diese sind alle websicher, also sollten sie auf fast allen Geräten funktionieren. Sie sind auch großartige Fallback-Schriften.

Wenn du etwas Aufregenderes brauchst, haben wir jede Menge Artikel über kursive Schriftarten, Kalligraphie-Schriftarten und moderne Schriftarten.

1. Arial

Ein Beispiel für die Schriftart Arial

Ein Beispiel für die Schriftart Arial

Arial ist die bekannteste aller Schriftarten. Sie ist nicht die schönste, aber sie ist einfach und nützlich in einer Vielzahl von Situationen.

2. Times New Roman

Times New Roman ist auch eine sehr verbreitete Schriftart. Sie ist am besten geeignet, wenn du eine eher formelle Seite betreibst. Diese Serifenschrift ist nicht besonders aufregend, aber sie lenkt auch nicht ab.

3. Palatino

Ein Beispiel für die Schriftart Palantino

Ein Beispiel für die Schriftart Palantino

Palatino kommt dir vielleicht bekannt vor, da sie oft im Buchdruck verwendet wird. Jetzt ist sie eine elegante digitale Schriftart, die standardmäßig auf vielen Geräten enthalten ist.

4. Verdana

Verdana ist bekannt dafür, sehr gut lesbar zu sein und sieht auch in großen Größen noch gut aus. Diese serifenlose Schrift ist eine gute Alternative zur Arial.

5. Courier New

Courier New

Ein Beispiel für die Schriftart Courier New

Courier New erinnert an alten Schreibmaschinentext und ist ein großartiges Monospaced-Design für Seiten, die einen altmodischen, aber gut lesbaren Look wünschen.

6. Calibri

calibri

Ein Beispiel für die Schriftart Calibri

Calibri ist eine einfache, schöne serifenlose Schriftart, die standardmäßig in Programmen wie Microsoft Office enthalten ist. Allerdings ist es eine proprietäre Schriftart, sodass sie oft nur auf Windows-Betriebssystemen unterstützt wird.

7. Georgia

georgia

Ein Beispiel für die Schriftart Georgia

Diese abgerundete Serifenschrift ist inspiriert von der ähnlichen, websicheren Schrift Garamond. Wenn du eine formale Schriftart brauchst, die nicht ganz so seriös ist wie Times New Roman, ist sie eine gute Wahl.

8. Garamond

garamond

Ein Beispiel für die Schriftart Geramond

Ähnlich wie die Palatino ist die Garamond eine klassische Schriftart, die oft für den Buchdruck verwendet wird. Obwohl sie für moderne Betriebssysteme aktualisiert wurde, sieht sie immer noch ziemlich altmodisch aus.

9. Didot

didot

Ein Beispiel für die Schriftart Didot

Die minimalen Buchstabenabstände dieser Serifenschrift geben ihr ein einzigartiges Aussehen und Gefühl. Du kannst sie auf den meisten Apple-Geräten finden.

10. Tahoma

tahoma

Ein Beispiel für die Schriftart Tahoma

Diese saubere Schriftart hat als Standardschrift für ältere Windows-Betriebssysteme fungiert. Ihr kühneres Erscheinungsbild lässt sie gerade genug hervorstechen, ohne abzulenken.

Stelle sicher, dass deine Seite nicht nur gut aussieht, sondern auch richtig funktioniert, mit Hilfe dieser websicheren Schriften ✨Click to Tweet

Zusammenfassung

Es ist wichtig, dass du Schriftarten auswählst, die auf deiner Webseite gut aussehen, lesbar sind und deine Marke verkörpern. Es gibt verschiedene Webseiten, auf denen du kostenlose Schriftarten installieren oder lizenzierte gegen eine Gebühr herunterladen kannst, und wir haben ein paar Beispiele für gute Schriftarten für den Anfang zusammengestellt.

Du musst dich nicht mit langweiligen, websicheren Schriftarten begnügen, die du schon seit Jahrzehnten überall im Internet siehst. Dank der Fallback-Fonts kannst du jede Typografie verwenden, die dir gefällt, und einen Fallback festlegen, der verwendet wird, wenn sie nicht geladen wird.

Egal ob du diese HTML Fonts auf deiner Webseite, in E-Mails oder in deinem Logo verwendest, stelle sicher, dass du viele Tests durchführst, damit deine Seite lesbar bleibt und die Typografie gut mit dem Rest deines Designs harmoniert.


Spare Zeit, Kosten und maximiere die Leistung deiner Seite mit:

  • Schnelle Hilfe von WordPress Hosting Experten, 24/7.
  • Cloudflare Enterprise Integration.
  • Globale Reichweite mit 28 Rechenzentren weltweit.
  • Optimierung mit unserem integrierten Application Performance Monitoring.

All das und noch viel mehr, in einem Plan ohne langfristige Verträge, betreute Migrationen und eine 30-Tage-Geld-zurück-Garantie. Schau Dir hier unsere Pakete an oder sprich mit dem Vertrieb, um den richtigen Tarif für dich zu finden.