Web typography is an important element in shaping user experience and brand identity.
When creating Django or static web projects, you'll encounter various font formats such as .ttf and .woff2.

This article explains the differences between .ttf and .woff2, why web developers prefer .woff2,
and how to convert .ttf to .woff2 on Ubuntu.
We also provide a Bash script that can automate the conversion process.

1. What is TTF?

TTF (TrueType Font) is a universal font format co-developed by Apple and Microsoft.
It supports both printing and screen output and is widely used across various operating systems.

• ✅ Advantages:
• Widely supported across all operating systems

• Suitable for image rendering and desktop applications

• ❌ Disadvantages (for web):

• Large file size
• Not optimized for web usage
• Slow loading speed

2. What is WOFF2?

WOFF2 (Web Open Font Format 2) is the latest compressed font format designed exclusively for the web.

• ✅ Advantages:
• Very high compression (up to 30% smaller than TTF)
• Fast loading, network optimized

• Fully supported by all modern browsers

• ❌ Disadvantages:

• Unsuitable for desktop applications or some image rendering
• Requires separate conversion from .ttf or .otf

3. Why Should Web Developers Use WOFF2?

Considering web performance and user experience, unless there is a specific reason, it is always recommended to use WOFF2.

4. Converting TTF to WOFF2 on Ubuntu

Installing Required Packages

sudo apt update
sudo apt install woff2

Once installed, you can convert using the command woff2_compress.

Manual Conversion Command

woff2_compress Poppins-Regular.ttf

A file named Poppins-Regular.woff2 will be created in the same directory.

5. Bonus: Automatic Conversion Bash Script

Using the script below, you can convert .ttf files all at once. Those familiar with bash scripting can copy and use it.

convert-ttf-to-woff2.sh

#!/bin/bash

# Directory for conversion
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# Check for woff2_compress command
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' command not found."
    echo "Install it using the following command:"
    echo "    sudo apt install woff2"
    exit 1
fi

# Create results directory
mkdir -p "$OUTPUT_DIR"
echo "📁 Conversion results directory: $OUTPUT_DIR"

# Execute conversion
echo "🔄 Converting 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 "⚠️  Already exists: $output_file (skipped)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ Conversion complete: $output_file"
done

echo "🎉 All conversions are done!"

✅ Summary

• .woff2 is the latest format designed for the web, excelling in performance and size.
• .ttf is inefficient for the web but useful for other purposes such as image rendering.
• Leveraging automatic conversion scripts can significantly enhance font management in your projects.

I hope this helps improve the font performance of your web projects!