Generador de @font-face

Generador de @font-face: para qué sirve

Para usar una fuente propia en tu sitio, sin depender de Google Fonts, hay que alojar los archivos y declarar cada uno con @font-face. Equivocarse con el peso o olvidar el font-display deja el texto invisible mientras carga o con una negrita falsa.

Elige los archivos y la herramienta descubre el peso y el estilo por el nombre (Regular, Bold, SemiBold, Italic, 700, variable), agrupa los formatos de la misma variante, genera las reglas con font-display: swap y la etiqueta preload con crossorigin para la fuente de la primera pantalla, y muestra una vista previa con la fuente real.

Cómo usar

1. Elige los archivos de la fuente.
2. Revisa el nombre de la familia, los pesos y la carpeta.
3. Copia el CSS y la etiqueta de preload.

Cuándo usar

• Usar la fuente de la marca en tu sitio.
• Alojar la fuente en vez de usar Google Fonts.
• Arreglar una fuente que aparece con la negrita equivocada.

Preguntas frecuentes

¿Qué formato de fuente usar?

WOFF2. Está comprimido y lo aceptan todos los navegadores actuales, así que en la mayoría de los sitios basta con él. TTF y OTF funcionan, pero pesan bastante más; conviértelos a WOFF2 antes de publicar.

¿Para qué sirve font-display: swap?

Muestra el texto de inmediato con una fuente del sistema y la cambia por la tuya cuando termina de descargarse. Sin eso, el navegador puede ocultar el texto por unos segundos, lo que PageSpeed señala como un problema.

¿Debo usar preload en todas las fuentes?

No, solo en las que se usan en la primera pantalla, normalmente una o dos (el texto del cuerpo y el título). Demasiado preload compite por la conexión con la imagen principal y puede empeorar la carga. El preload de fuentes necesita el atributo crossorigin, incluso en el mismo dominio.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares