1. Wat is OTF?

OTF (OpenType Font) is een lettertype-indeling ontwikkeld door Adobe en Microsoft,
met uitbreidingen van de mogelijkheden van .ttf (TrueType Font) en geavanceerde typografiefuncties.

  • ✅ Diverse lettertypefuncties (ligaturen, alternatieve karakters, enz.)
  • ✅ Unicode-ondersteuning
  • ✅ Grotere veelzijdigheid dan .ttf (vooral favoriet in professionele ontwerptools)

In Ubuntu worden OTF-lettertypen vooral gebruikt als systeem- of PDF-renderinglettertypen.

2. Geïnstalleerde OTF-lettertypen op Ubuntu controleren

Dit kan worden gecontroleerd met de volgende opdracht in de terminal:

fc-list | grep "\.otf"

Je kunt ook filteren op een specifieke lettertype naam:

fc-list | grep "Nimbus Sans" | grep "\.otf"

3. Systeemlettertypen gebruiken op het web

Je kunt de op het systeem geïnstalleerde lettertypen niet direct gebruiken op het web.
Dat komt omdat de computer van de client die de website benadert, die lettertypen mogelijk niet heeft.

→ Daarom moet je lettertypen op de webserver aanbieden, en de meest efficiënte indeling is .woff2.

4. De conversie van OTF naar WOFF2 is essentieel!

Illustratie van OTF naar WOFF2 lettertype conversie

📦 Installatie van conversietool

sudo apt install woff2

🔄 Conversieopdracht

woff2_compress YourFont.otf

→ Resultaat: YourFont.woff2

Automatische conversiescript

#!/bin/bash
export LC_ALL=C
# [1] Doel lettertype naam
read -p "Voer de lettertypen in die je naar woff2 wilt converteren: " FONT_NAME

# [2] Resultaat opslagpad instellen
DEST_DIR="$HOME/fonts/$(echo $FONT_NAME | tr ' ' '_' | tr '[:upper:]' '[:lower:]')/woff2"

# [3] Controleer de conversietool
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' opdracht is niet beschikbaar. Installeer het en gebruik het:"
    echo "    sudo apt install woff2"
    exit 1
fi

# [4] Maak resultaatmap aan
mkdir -p "$DEST_DIR"

# [5] Exporteer alleen .otf-lettertypen met FONT_NAME uit de systeemlettertypenlijst
echo "🔍 Op zoek naar '$FONT_NAME' lettertypen met .otf extensie..."
font_paths=$(fc-list | grep "$FONT_NAME" | grep "\\.otf" | cut -d: -f1 | sort | uniq)

if [ -z "$font_paths" ]; then
    echo "❌ Geen .otf lettertypen gevonden voor '$FONT_NAME'"
    exit 1
fi

# [6] Uitvoeren van de conversielus
for font_file in $font_paths; do
    base_name=$(basename "$font_file" .otf)
    output_file="$DEST_DIR/${base_name}.woff2"

    if [ -f "$output_file" ]; then
        echo "⚠️  Bestaat al: $output_file → overspringen"
        continue
    fi

    echo "🔄 Aan het converteren: $base_name.otf → $base_name.woff2"

    if ! cp "$font_file" "/tmp/${base_name}.otf"; then
        echo "❌ Kopiëren mislukt: $font_file → overspringen"
        continue
    fi

    woff2_compress "/tmp/${base_name}.otf"
    mv "/tmp/${base_name}.woff2" "$output_file"
    rm "/tmp/${base_name}.otf"
    echo "✅ Opgeslagen: $output_file"
done

echo "🎉 Alle conversies zijn voltooid! Opgeslagen op: $DEST_DIR"

Diegenen die het nodig hebben, kunnen het script dat ik heb geschreven gebruiken. Het werkt geweldig.

5. Hoe de geconverteerde woff2-bestanden op het web te gebruiken

Plaats deze in de static/fonts/ directory van je webproject en declareer in CSS:

@font-face {
  font-family: 'Your Custom Font';
  src: url('/static/fonts/YourFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Nu kun je het in HTML gebruiken zoals hieronder:

<body style="font-family: 'Your Custom Font', sans-serif;">
  Hallo! Dit is een aangepast lettertype.
</body>

6. Conclusie

Item Kernpunt
.otf lettertypen Veelvuldig geïnstalleerd op Ubuntu-systemen
Gebruik op het web Omdat ze niet op de clientcomputer staan, is conversie naar .woff2 nodig
Optimalisatiemethoden Converteren met woff2_compress en vervolgens serveren vanaf static
Resultaat Snelle lettertype-lading, mogelijkheid om specifieke lettertype-ontwerpen weer te geven

Voor ontwikkelaars die Ubuntu-systemen meer naadloos willen verbinden met webdiensten,
is de conversie van otf → woff2 een waardevol hulpmiddel om te kennen. 💪