TTF vs WOFF2: Vergelijking van weblettertype-indelingen

Webtypografie is een belangrijk element bij het vormen van de gebruikerservaring en de merkidentiteit.
Wanneer je een Django- of statisch webproject maakt, kom je verschillende lettertype-indelingen tegen, zoals .ttf en .woff2.

In dit artikel bespreken we de verschillen tussen .ttf en .woff2, waarom webontwikkelaars de voorkeur geven aan .woff2,
en hoe je .ttf naar .woff2 kunt converteren op Ubuntu.
We bieden ook een Bash-script aan om de conversietaken te automatiseren.

1. Wat is TTF?

TTF (TrueType Font) is een universele lettertype-indeling die gezamenlijk is ontwikkeld door Apple en Microsoft.
Het ondersteunt zowel drukwerk als schermweergave en wordt op verschillende besturingssystemen breed gebruikt.

• ✅ Voordelen:
• Breed ondersteund op alle besturingssystemen

• Geschikt voor afbeeldingsrendering of desktop-applicaties

• ❌ Nadelen (in termen van web):

• Groot bestandsgrootte
• Niet geoptimaliseerd voor het web
• Langzame laadtijd

2. Wat is WOFF2?

WOFF2 (Web Open Font Format 2) is een moderne, gecomprimeerde lettertype-indeling die speciaal voor het web is ontworpen.

• ✅ Voordelen:
• Zeer hoge compressie (maximaal 30% kleiner dan TTF)
• Snel laden, geoptimaliseerd voor netwerken

• Volledige ondersteuning voor alle moderne browsers

• ❌ Nadelen:

• Ongeschikt voor desktop-applicaties of sommige afbeeldingsrendering
• Vereist aparte conversie van .ttf of .otf

3. Waarom zouden webontwikkelaars WOFF2 moeten gebruiken?

Bij het overwegen van webprestaties en gebruikerservaring, is het raadzaam om altijd WOFF2 te gebruiken, tenzij er een bijzondere reden is om dat niet te doen.

4. TTF → WOFF2 converteren op Ubuntu

Benodigde pakketten installeren

sudo apt update
sudo apt install woff2

Na installatie kan de conversie worden uitgevoerd met het commando woff2_compress.

Handmatig conversiecommando

woff2_compress Poppins-Regular.ttf

In dezelfde map wordt een Poppins-Regular.woff2 bestand aangemaakt.

5. Bonus: Automatische conversie Bash-script

Met het onderstaande script kun je meerdere .ttf bestanden tegelijk converteren. Voor degenen die vertrouwd zijn met bash-scripts, voel je vrij om het te kopiëren en te gebruiken.

convert-ttf-to-woff2.sh

#!/bin/bash

# Doelmap voor conversie
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# Controleer het woff2_compress commando
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' commando niet gevonden."
    echo "Installeer met het volgende commando:"
    echo "    sudo apt install woff2"
    exit 1
fi

# Maak de resultaatmap aan
mkdir -p "$OUTPUT_DIR"
echo "📁 Resultaatmap voor conversie: $OUTPUT_DIR"

# Start de conversie
echo "🔄 Conversteren van 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 "⚠️  Bestaat al: $output_file (overslaan)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ Conversie voltooid: $output_file"
done

echo "🎉 Alle conversies zijn voltooid!"

✅ Samenvatting

---

---

• .woff2 is een moderne indeling die speciaal voor het web is ontworpen en uitblinkt in prestaties en bestandsgrootte.
• .ttf is inefficiënt voor het web, maar nuttig voor andere toepassingen zoals afbeeldingsrendering.
• Door gebruik te maken van het automatische conversiescript kun je het beheer van lettertypes in je project veel efficiënter maken.

We hopen dat dit nuttig is voor het verbeteren van de lettertypeprestaties van je webproject!