La tipografía web es un elemento clave en la creación de una experiencia de usuario y una identidad de marca.
Al desarrollar un proyecto web con Django o uno estático, te encontrarás con varios formatos de fuente, como .ttf y .woff2.

En este artículo, explicaré las diferencias entre .ttf y .woff2, por qué los desarrolladores web prefieren .woff2,
y cómo convertir .ttf a .woff2 en Ubuntu.
También proporcionaré un script Bash para automatizar el proceso de conversión.

1. ¿Qué es TTF?

TTF (TrueType Font) es un formato de fuente universal desarrollado conjuntamente por Apple y Microsoft.
Soporta tanto impresión como salida de pantalla y se utiliza ampliamente en diversos sistemas operativos.

• ✅ Ventajas:
• Amplia compatibilidad en todos los sistemas operativos

• Adecuado para renderizado de imágenes o aplicaciones de escritorio

• ❌ Desventajas (en la web):

• Tamaño de archivo grande
• No optimizado para la web
• Velocidad de carga lenta

2. ¿Qué es WOFF2?

WOFF2 (Web Open Font Format 2) es un formato de fuente comprimido diseñado exclusivamente para la web.

• ✅ Ventajas:
• Muy alta tasa de compresión (hasta 30% más pequeño que TTF)
• Carga rápida, optimizado para redes

• Compatibilidad total con todos los navegadores modernos

• ❌ Desventajas:

• Inadecuado para aplicaciones de escritorio o renderizado de imágenes específicas
• Necesita conversión separada desde .ttf o .otf

3. ¿Por qué los desarrolladores web deberían usar WOFF2?

Considerando el rendimiento web y la experiencia del usuario, si no hay una razón especial, siempre es recomendable usar WOFF2.

4. Convertir TTF a WOFF2 en Ubuntu

Instalación de paquetes necesarios

sudo apt update
sudo apt install woff2

Una vez instalado, la conversión se puede hacer con el comando woff2_compress.

Comando de conversión manual

woff2_compress Poppins-Regular.ttf

Se generará un archivo Poppins-Regular.woff2 en el mismo directorio.

5. Bonificación: Script Bash de conversión automática

Usando el siguiente script, puedes convertir archivos .ttf todos a la vez. Los que estén familiarizados con bash script pueden copiarlo y usarlo.

convert-ttf-to-woff2.sh

#!/bin/bash

# Directorio de entrada
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# Verificar si el comando woff2_compress está disponible
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ No se encontró el comando 'woff2_compress'"
    echo "Instálalo con el siguiente comando:"
    echo "    sudo apt install woff2"
    exit 1
fi

# Crear directorio de resultados
mkdir -p "$OUTPUT_DIR"
echo "📁 Directorio de resultados de conversión: $OUTPUT_DIR"

# Ejecución de la conversión
echo "🔄 Convertiendo TTF a 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 "⚠️  Ya existe: $output_file (saltar)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ Conversión completada: $output_file"
done

echo "🎉 ¡Conversión completada para todos los archivos!"

✅ Resumen

• .woff2 es un formato moderno diseñado específicamente para la web, destacando en rendimiento y tamaño.
• .ttf es ineficiente para la web pero útil en otros contextos como renderizado de imágenes.
• Utilizar scripts de conversión automática puede hacer que la gestión de fuentes en tus proyectos sea mucho más eficiente.

¡Espero que esto ayude a mejorar el rendimiento de las fuentes en tu proyecto web!