1. What is OTF?

OTF (OpenType Font) is a font format developed collaboratively by Adobe and Microsoft,
expanding upon the functionalities of .ttf (TrueType Font) while incorporating advanced typography features.

  • ✅ Various font features (ligatures, alternate characters, etc.)
  • ✅ Unicode support
  • ✅ Broader versatility compared to .ttf (especially preferred in professional design tools)

On Ubuntu, OTF is particularly used as a system or PDF rendering font.

2. Checking Installed OTF Fonts on Ubuntu

You can check installed fonts using the following command in the terminal:

fc-list | grep "\.otf"

You can also filter by a specific font name:

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

3. When You Want to Use System Fonts on the Web

You cannot directly use the fonts installed on the system for the web.
This is because the client's computer accessing the website may not have the corresponding font installed.

→ Therefore, the font must be provided by the web server, and the most efficient format is .woff2.

4. OTF → WOFF2 Conversion is Key!

OTF to WOFF2 font conversion illustration

📦 Install Conversion Tool

sudo apt install woff2

🔄 Conversion Command

woff2_compress YourFont.otf

→ Result: YourFont.woff2

Automated Conversion Script

#!/bin/bash
export LC_ALL=C
# [1] Target font name
read -p "Enter the fonts to convert to woff2: " FONT_NAME

# [2] Set the result storage path
DEST_DIR="$HOME/fonts/$(echo $FONT_NAME | tr ' ' '_' | tr '[:upper:]' '[:lower:]')/woff2"

# [3] Check conversion tool
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' command not found. Please install it first:"
    echo "    sudo apt install woff2"
    exit 1
fi

# [4] Create result folder
mkdir -p "$DEST_DIR"

# [5] Extract paths of .otf fonts containing FONT_NAME from the system font list
echo "🔍 Searching for '$FONT_NAME' fonts with .otf extension..."
font_paths=$(fc-list | grep "$FONT_NAME" | grep "\\.otf" | cut -d: -f1 | sort | uniq)

if [ -z "$font_paths" ]; then
    echo "❌ Cannot find .otf font corresponding to '$FONT_NAME'"
    exit 1
fi

# [6] Conversion execution loop
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 "⚠️  Already exists: $output_file → Skipping"
        continue
    fi

    echo "🔄 Converting: $base_name.otf → $base_name.woff2"

    if ! cp "$font_file" "/tmp/${base_name}.otf"; then
        echo "❌ Copy failed: $font_file → Skipping"
        continue
    fi

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

echo "🎉 All conversions completed! Saved location: $DEST_DIR"

If you need it, feel free to use the script I wrote above. It works great.

5. How to Use Converted WOFF2 Files on the Web

Place it in the static/fonts/ directory of your web project and declare it in your CSS:

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

Now you can use it in HTML like this:

<body style="font-family: 'Your Custom Font', sans-serif;">
  Hello! This is a custom font.
</body>

6. Conclusion

Item Key Point
.otf Font Widely installed in Ubuntu systems
Using on the Web Needs to be converted to .woff2 as it's not available on client PCs
Optimization Method Convert with woff2_compress and serve from static
Result Fast font loading and reflection of custom font design

If you are a developer who wants to connect Ubuntu systems more closely with web services,
knowing how to convert otf → woff2 is a great asset to have. 💪