1. ¿Qué es OTF?

OTF (OpenType Font) es un formato de fuente desarrollado en conjunto por Adobe y Microsoft,
que amplía las funcionalidades de .ttf (TrueType Font) e incluye características avanzadas de tipografía.

  • ✅ Funciones de fuente diversas (ligaduras, caracteres alternativos, etc.)
  • ✅ Soporte para Unicode
  • ✅ Mayor versatilidad que .ttf (especialmente preferido en herramientas de diseño profesionales)

En Ubuntu, OTF se utiliza especialmente como fuente para sistemas o renderización de PDF.

2. Comprobar las fuentes OTF instaladas en Ubuntu

Se puede verificar con el siguiente comando en la terminal:

fc-list | grep "\.otf"

También se puede filtrar por un nombre de fuente específico:

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

3. Cuando quieres usar fuentes del sistema en la web

No puedes usar directamente las fuentes instaladas en el sistema en la web.
Porque la computadora del cliente que accede al sitio web podría no tener esa fuente.

→ Por lo tanto, es necesario proporcionar la fuente desde el servidor web, y el formato más eficiente es .woff2.

4. La conversión de OTF a WOFF2 es la clave!

Ilustración de conversión de OTF a WOFF2

📦 Instala la herramienta de conversión

sudo apt install woff2

🔄 Comando de conversión

woff2_compress YourFont.otf

→ Resultado: YourFont.woff2

Script de conversión automática

#!/bin/bash
export LC_ALL=C
# [1] Nombre de la fuente objetivo
read -p "Ingrese los nombres de las fuentes para convertir a woff2: " FONT_NAME

# [2] Establecer la ruta de almacenamiento de resultados
DEST_DIR="$HOME/fonts/$(echo $FONT_NAME | tr ' ' '_' | tr '[:upper:]' '[:lower:]')/woff2"

# [3] Verificar la herramienta de conversión
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ No se encuentra el comando 'woff2_compress'. Instale y use:"
    echo "    sudo apt install woff2"
    exit 1
fi

# [4] Crear carpeta de resultados
mkdir -p "$DEST_DIR"

# [5] Extraer solo las rutas de fuentes del sistema que son .otf y contienen FONT_NAME
echo "🔍 Buscando fuentes '$FONT_NAME' con extensión .otf..."
font_paths=$(fc-list | grep "$FONT_NAME" | grep "\\.otf" | cut -d: -f1 | sort | uniq)

if [ -z "$font_paths" ]; then
    echo "❌ No se pudieron encontrar fuentes .otf para '$FONT_NAME'."
    exit 1
fi

# [6] Bucle de ejecución de conversión
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 "⚠️  Ya existe: $output_file → se omite"
        continue
    fi

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

    if ! cp "$font_file" "/tmp/${base_name}.otf"; then
        echo "❌ Fallo al copiar: $font_file → se omite"
        continue
    fi

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

echo "🎉 Todos los cambios completados! Ubicación guardada: $DEST_DIR"

Si lo necesitas, prueba el script que he creado arriba. Funciona muy bien.

5. Cómo usar el archivo woff2 convertido en la web

Coloca en el directorio static/fonts/ de tu proyecto web y decláralo en CSS:

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

Ahora puedes utilizarlo en HTML de la siguiente manera:

<body style="font-family: 'Your Custom Font', sans-serif;">
  ¡Hola! Esta es una fuente personalizada.
</body>

6. Conclusión

Ítem Punto clave
.otf fuente Comúnmente instalada en sistemas Ubuntu
Uso en la web Como no está en la PC del cliente, necesita conversión a .woff2
Métodos de optimización Convertir usando woff2_compress y servir desde static
Resultado Carga rápida de fuentes, reflejar el diseño de fuentes personalizadas

Para los desarrolladores que desean conectar más estrechamente el sistema Ubuntu con los servicios web,
la conversión otf → woff2 es definitivamente una herramienta que debes conocer. 💪