Web-Typografie ist ein wichtiger Faktor bei der Gestaltung der Benutzererfahrung und der Markenidentität.
Wenn Sie ein Django- oder statisches Webprojekt erstellen, stoßen Sie auf verschiedene Schriftformate wie .ttf und .woff2.

In diesem Artikel erläutern wir die Unterschiede zwischen .ttf und .woff2, warum Webentwickler .woff2 bevorzugen,
und wie man .ttf in .woff2 unter Ubuntu umwandelt.
Zudem stellen wir ein Bash-Skript zur Verfügung, um die Umwandlung zu automatisieren.

1. Was ist TTF?

TTF (TrueType Font) ist ein universelles Schriftformat, das von Apple und Microsoft gemeinsam entwickelt wurde.
Es unterstützt sowohl Druck- als auch Bildschirmdarstellung und wird in verschiedenen Betriebssystemen weit verbreitet eingesetzt.

• ✅ Vorteile:
• Weit verbreitete Unterstützung in allen Betriebssystemen

• Eignet sich gut für die Bilddarstellung oder Desktop-Apps

• ❌ Nachteile (im Web):

• Große Dateigröße
• Nicht für das Web optimiert
• Langsame Ladegeschwindigkeit

2. Was ist WOFF2?

WOFF2 (Web Open Font Format 2) ist ein neu gestaltetes komprimiertes Schriftformat, das speziell für das Web entwickelt wurde.

• ✅ Vorteile:
• Sehr hohe Komprimierungsrate (bis zu 30% kleiner als TTF)
• Schnelles Laden, netzwerkoptimiert

• Vollständige Unterstützung in allen modernen Browsern

• ❌ Nachteile:

• Ungeeignet für Desktop-Apps oder einige Bilddarstellungen
• Benötigt separate Umwandlung von .ttf oder .otf

3. Warum sollten Webentwickler WOFF2 verwenden?

Wenn man die Webleistung und die Benutzererfahrung betrachtet, ist es ratsam, immer WOFF2 zu verwenden, sofern es keinen besonderen Grund gibt, dies nicht zu tun.

4. Umwandlung von TTF → WOFF2 unter Ubuntu

Erforderliche Pakete installieren

sudo apt update
sudo apt install woff2

Nach der Installation kann die Umwandlung mit dem Befehl woff2_compress erfolgen.

Manueller Umwandlungsbefehl

woff2_compress Poppins-Regular.ttf

Eine Datei Poppins-Regular.woff2 wird im gleichen Verzeichnis erstellt.

5. Bonus: Automatisches Umwandlungsskript in Bash

Mit dem folgenden Skript können Sie alle .ttf-Dateien auf einmal umwandeln. Personen, die mit Bash-Skripten vertraut sind, können es kopieren und verwenden.

convert-ttf-to-woff2.sh

#!/bin/bash

# Zielverzeichnis für die Umwandlung
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# Überprüfen des Befehls woff2_compress
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ Der Befehl 'woff2_compress' konnte nicht gefunden werden."
    echo "Installieren Sie ihn mit folgendem Befehl:"
    echo "    sudo apt install woff2"
    exit 1
fi

# Ergebnisverzeichnis erstellen
mkdir -p "$OUTPUT_DIR"
echo "📁 Ergebnisverzeichnis für die Umwandlung: $OUTPUT_DIR"

# Umwandlung ausführen
echo "🔄 Umwandlung von TTF → WOFF2..."

find "$FONT_DIR" -maxdepth 1 -type f -name "*.ttf" | while read -r ttf_file; do
    filename=$(basename "$ttf_file")
    base="${filename%.ttf}"
    output_file="$OUTPUT_DIR/$base.woff2"

    if [[ -f "$output_file" ]]; then
        echo "⚠️  Bereits vorhanden: $output_file (überspringen)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ Umwandlung abgeschlossen: $output_file"
done

echo "🎉 Alle Umwandlungen sind nun abgeschlossen!"

✅ Zusammenfassung

• .woff2 ist ein modernes Format, das speziell für das Web entwickelt wurde und in Bezug auf Leistung und Größe überlegen ist.
• .ttf ist im Web ineffizient, bleibt jedoch für andere Anwendungen wie die Bilddarstellung nützlich.
• Durch die Nutzung des automatischen Umwandlungsskripts kann die Schriftartenverwaltung in Projekten wesentlich effizienter gestaltet werden.

Ich hoffe, dies hilft Ihnen dabei, die Leistung Ihrer Webprojekte zu verbessern!