Convertir iconos SVG en una fuente TTF

Elegir el formato adecuado

Una fuente de iconos sirve para conjuntos monocromos que heredan color y tamaño del texto. SVG en línea suele facilitar los gráficos multicolor y la accesibilidad precisa. Ninguna opción es siempre más rápida: mida su aplicación y compare sus recursos.

Preparar trazados rellenos

Prepare un SVG válido con viewBox y trazados rellenos. Convierta los contornos en formas y aplane transformaciones o recortes no admitidos en su editor vectorial. Un icono formado únicamente por trazos puede generar un glifo vacío. Este cuadrado ofrece un ejemplo sencillo.

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 4H20V20H4Z" fill="currentColor"/>
</svg>

Generar y descargar

Abra el conversor SVG a fuente, añada los iconos y genere la fuente. El conversor JavaScript del navegador crea TTF y asignaciones CSS. Descargue el TTF y copie el CSS por separado. No hay compresión WOFF/WOFF2 ni archivo ZIP. Los conjuntos grandes pueden bloquear temporalmente la interfaz porque la generación usa el hilo principal.

Integrar y probar

Coloque el TTF en la ruta de la regla @font-face y compruebe que carga sin errores 404. Revise nombres, códigos Unicode, alineación y tamaño. El área Unicode privada no garantiza accesibilidad: aplique aria-hidden="true" a iconos decorativos y añada texto a controles importantes. Para WOFF2 necesita otro conversor y actualizar URL y formato del CSS. La IA opcional puede enviar datos externamente después del consentimiento.

Geometría de Glifos, Alineación y Accesibilidad

Al generar fuentes de iconos TrueType a partir de vectores SVG, los ingenieros frontend deben tener en cuenta tres aspectos clave:

1. Inversión del Eje Y y Espacio de Coordenadas: En SVG, el origen (0,0) se sitúa en la esquina superior izquierda. Por el contrario, las métricas tipográficas OpenType/TrueType colocan el origen en la línea base inferior izquierda. Los compiladores en el navegador invierten automáticamente las curvas verticales.
2. Escalado Em-Square y Peso Óptico: Las fuentes de iconos calculan las dimensiones usando unidades por em (normalmente 1000 o 2048 UPM). Asegúrese de que todos los iconos SVG utilicen el mismo viewBox cuadrado (como 0 0 24 24) para evitar desfases de altura con el texto circundante.
3. Accesibilidad para Lectores de Pantalla (WCAG 2.1): Los glifos se ubican en el Área de Uso Privado de Unicode (PUA). Los lectores de pantalla no interpretan estos códigos. Añada siempre aria-hidden="true" a los iconos y proporcione una etiqueta de texto accesible (<span class="sr-only">...</span>).