T
fonts web-design performance typography svg ico file-extensions

Leitfaden für Web- und Schriftdateiendungen: WOFF2, TTF, OTF und ICO

Warum gibt es so viele Schrift- und Web-Icon-Formate? Erfahren Sie die Unterschiede zwischen .woff2, .woff, .ttf, .otf, .svg und .ico.

2026-04-11

Leitfaden für Web- und Schriftdateierweiterungen: WOFF2, TTF, OTF und ICO

Beim Erstellen einer Website oder beim Entwerfen eines digitalen Produkts ist die Wahl des richtigen Dateiformats für Typografie und Symbole entscheidend für die visuelle Qualität und die Ladegeschwindigkeit. Die Verwendung eines veralteten Schriftformats kann zu „unsichtbarem“ Text während des Ladens der Schrift führen oder die Leistung Ihrer Website erheblich beeinträchtigen.

In diesem Leitfaden werden die wichtigsten Erweiterungen für Schriften und Webgrafiken erläutert, die Sie kennen müssen.

Kurzreferenztabelle: Schrift- und Webformate

Erweiterung Vollständiger Name Kompression Hauptverwendung
.woff2 Web Open Font Format 2.0 Sehr hoch Modernes Web (Beste Leistung)
.woff Web Open Font Format 1.0 Hoch Web (Unterstützung für ältere Browser)
.ttf TrueType Font Niedrig Windows/macOS Desktop, Basis-Web
.otf OpenType Font Niedrig Grafikdesign, Fortgeschrittene Typografie
.svg Scalable Vector Graphics Variiert Web-Icons, Logos, Vektorgrafiken
.ico Icon Keine Favicons (Browser-Tab-Icons)

1. Der moderne Webstandard (.woff2)

WOFF2 ist heute der Goldstandard für Webtypografie. Es verwendet einen fortschrittlichen Kompressionsalgorithmus (Brotli), um Schriftdateien um bis zu 30 % kleiner zu machen als das ursprüngliche WOFF.

  • Vorteile: Schnellste Ladezeiten, unterstützt von allen modernen Browsern.
  • Warum verwenden? Wenn Sie sich nur für moderne Browser (Chrome, Firefox, Safari, Edge) interessieren, ist .woff2 das einzige Format, das Sie in Ihrer CSS @font-face-Regel angeben müssen.

2. Unterstützung für ältere Systeme (.woff)

Der Vorgänger von WOFF2. Obwohl es immer noch weitgehend unterstützt wird, ist es nicht so effizient.

  • Warum verwenden? Verwenden Sie es als Fallback, wenn Sie etwas ältere Browser unterstützen müssen, die WOFF2 noch nicht verstehen.

3. Desktop- und Design-Standards (.ttf, .otf)

Dies sind die Formate, die Sie auf Ihrem Computer installieren, um sie in Word, Photoshop oder Figma zu verwenden.

  • TTF (TrueType): In den 1980er Jahren von Apple und Microsoft entwickelt. Es ist das am weitesten verbreitete Format für den allgemeinen Gebrauch.
  • OTF (OpenType): Basiert auf TTF, unterstützt aber erweiterte „OpenType-Funktionen“ wie Ligaturen, Kapitälchen und alternative Glyphen. Designer bevorzugen OTF für hochwertige Druck- und Digitalarbeiten.
  • Web-Nutzung: Sie können diese zwar im Web verwenden, aber sie sind unkomprimiert und schwer. Es ist besser, sie zuerst in WOFF2 zu konvertieren.

4. Skalierbare Grafiken (.svg)

Im Gegensatz zu Schriften, bei denen es sich um Sammlungen von Zeichen handelt, ist SVG ein Vektorbildformat.

  • Logos und Icons: SVGs sind perfekt für Logos, da sie nie unscharf werden, egal wie weit man hineinzoomt.
  • In CSS: Sie können SVGs als Hintergrundbilder oder sogar als „SVG-Fonts“ verwenden (obwohl letzteres heute weitgehend zugunsten von WOFF2 veraltet ist).

5. Das Favicon (.ico)

Das .ico-Format ist ein spezieller Container, der mehrere Versionen eines Icons in verschiedenen Größen (16x16, 32x32, 48x48) in einer einzigen Datei enthalten kann.

  • Hauptverwendung: Das „Favicon“, das Sie in Browser-Tabs sehen.
  • Moderne Alternative: Die meisten modernen Browser unterstützen mittlerweile PNG oder SVG für Favicons, aber .ico bleibt das kompatibelste Fallback.

Best Practices für Webtypografie

  1. WOFF2 priorisieren: Listen Sie .woff2 in Ihrem CSS immer an erster Stelle auf, um sicherzustellen, dass moderne Browser die kleinste Datei erhalten.
  2. Schriften kürzen (Subsetting): Viele Schriftdateien enthalten Zeichen für hunderte Sprachen, die Sie nicht verwenden. Das „Subsetting“ einer Schrift entfernt nicht verwendete Zeichen und verkleinert so die Dateigröße noch weiter.
  3. font-display: swap verwenden: Dies stellt sicher, dass Text sofort mit einer Systemschrift sichtbar ist und zur benutzerdefinierten Schrift wechselt, sobald diese geladen ist.

Häufig gestellte Fragen (FAQ)

F: Kann ich .ttf online in .woff2 konvertieren?

A: Ja! Es gibt viele kostenlose Tools, die Ihre Desktop-Dateien im .ttf- oder .otf-Format komprimieren und in webfertige .woff2-Dateien umwandeln.

F: Unterstützt WOFF2 alle Funktionen von OTF?

A: Ja. WOFF2 ist im Wesentlichen eine OTF- oder TTF-Datei, die in eine sehr effiziente Kompressionsschicht eingehüllt ist. Alle typografischen Merkmale (wie Ligaturen) der Originaldatei bleiben erhalten.

F: Sollte ich SVG für die Icons meiner Website verwenden?

A: Im Allgemeinen ja. SVGs sind scharf, unterstützen Transparenz und können mit CSS gestylt werden. Für komplexe Icon-Sets bevorzugen einige Entwickler „Icon-Fonts“ (unter Verwendung einer .woff2-Datei), aber Inline-SVG gilt als moderner Best-Practice-Standard.

Verwandte Tools auf Tool3M

  • Einheitenrechner: Berechnen Sie Schriftgrößen zwischen Pixeln, EM und REM.
  • Bild zu Base64: Betten Sie kleine SVG-Icons direkt in Ihr CSS oder HTML ein.
Zurück zum Blog