Generador de Webfonts — TTF y OTF a WOFF2 con CSS

Revisa primero la licencia de tu fuente

Las fuentes son software, y su licencia determina lo que puedes hacer con ellas. Muchas licencias comerciales cubren solo el uso en escritorio o cobran aparte por el uso web, y algunas prohíben convertir el archivo. Esto puede aplicarse incluso si compraste la fuente. Las licencias abiertas, como la SIL Open Font License, suelen permitir el uso web, pero tienen sus propias condiciones. Lee tu licencia antes de convertir. devpack no verifica licencias, y tú eres el único responsable del uso de tus fuentes y de los archivos que generes.

¿Qué formato de fuente debo usar?

WOFF2 es la opción adecuada para casi cualquier sitio web. Tiene la mejor compresión y funciona en todos los navegadores modernos. Añade WOFF solo si necesitas dar soporte a navegadores muy antiguos. TTF y OTF son formatos de escritorio y suelen ser mucho más pesados.

¿Qué es el subconjunto de fuentes?

Una fuente puede contener miles de caracteres que tu sitio nunca muestra. El subconjunto los elimina, lo que puede reducir mucho el tamaño del archivo y acelerar tus páginas. Al elegir conjuntos de caracteres, el CSS también recibe un unicode-range, de modo que los navegadores descargan la fuente solo cuando una página la necesita. Conserva todos los idiomas que usa tu sitio, porque los caracteres eliminados recurrirán a otra fuente.

¿Qué incluye el ZIP?

• Una carpeta fonts con tus archivos convertidos.
• stylesheet.css con una regla @font-face por fuente, con grosor y estilo.
• demo.html, una página que muestra cada fuente funcionando.
• FONT-INFO.txt, con los datos de copyright y licencia que informa cada fuente.

Opciones avanzadas

• Fuentes variables: reduce un eje, elimínalo o crea grosores estáticos como 400 y 700. El CSS recibe el rango de grosor correcto.
• Características OpenType: conserva el conjunto estándar, conserva todas o marca exactamente las que quieras.
• Métricas verticales: iguala la altura de línea entre plataformas o define tus propios valores.
• Respaldo equivalente: añade una fuente del sistema redimensionada para que el texto se mueva menos cuando carga tu webfont, lo que ayuda a tu puntuación de desplazamiento de diseño.
• Código: obtén reglas @font-face, un fragmento de uso, etiquetas de precarga o la configuración de Tailwind CSS.

¿Cuál es el mejor valor de font-display?

swap muestra el texto con una fuente de respaldo de inmediato y luego cambia a tu fuente cuando carga. optional evita ese cambio y el desplazamiento del diseño, pero con una conexión lenta es posible que tu fuente nunca se muestre. Para acelerar aún más, precarga tu fuente principal con una etiqueta link rel="preload" y prueba la página con el Page Speed Test.

Usar webfonts en Webflow

Descarga los archivos WOFF2 y súbelos en Site settings → Fonts → Custom fonts. Webflow crea el CSS por ti. ¿Necesitas código personalizado en tu proyecto? La herramienta HTML & CSS to Webflow puede ayudarte.

También se busca como: convertir ttf a woff2, convertir otf a woff2, generador web font, alternativa a font squirrel, generador font-face css, subconjunto de fuentes, convertir fuente a webfont.

Herramientas que combinan con: Generador de Webfonts

• Compresor de Imágenes — Reduce fotos y gráficos hasta un 90 % sin pérdida visible de calidad, según la imagen y los ajustes.
• Minificador CSS — Pega una hoja de estilos para reducirla al instante.
• Estilos de Botones CSS — Elige entre 24 botones CSS animados: rellenos, bordes, brillos, destellos y pulsaciones 3D.
• Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.