Generador CSS @font-face
Añade tus archivos de fuentes (o sus URL) y obtén reglas @font-face limpias con los formatos, grosores y estilos correctos, leídos directamente de las propias fuentes. Previsualiza cada variante antes de pegar el CSS; los archivos nunca salen de tu dispositivo.
Última actualización:
Variantes de fuente 0
Cómo usar Generador CSS @font-face
- Añade fuentes: elige o suelta tus archivos .woff2, .woff, .ttf u .otf, o pega una URL de fuente y pulsa Añadir URL.
- Revisa cada variante: la familia, el grosor y el estilo se rellenan a partir de la fuente; ajústalos si hace falta.
- Indica la ruta donde estarán los archivos en tu sitio (por ejemplo, /fonts/) y elige font-display y un unicode-range.
- Previsualiza las variantes con tu propio texto de ejemplo.
- Copia el CSS (y las etiquetas de precarga opcionales) o descárgalo como archivo .css.
Formatos de fuente y sus nombres format()
| Archivo | format() | Tipo MIME | Notas |
|---|---|---|---|
| .woff2 | format('woff2') | font/woff2 | Comprimido con Brotli; el más pequeño; todos los navegadores actuales. Ponlo primero. |
| .woff | format('woff') | font/woff | Comprimido con zlib; alternativa para navegadores muy antiguos (IE 9-11). |
| .ttf | format('truetype') | font/ttf | Fuente de escritorio sin comprimir; funciona, pero es mucho más grande. |
| .otf | format('opentype') | font/otf | OpenType con contornos CFF; sin comprimir. |
| .eot | format('embedded-opentype') | application/vnd.ms-fontobject | Solo Internet Explorer 6-8; obsoleto. |
El navegador recorre la lista src de izquierda a derecha y descarga el primer formato que admite, así que el formato más pequeño va primero. ¿Necesitas archivos WOFF2? Convierte fuentes TTF con el convertidor de TTF a WOFF2.
Una familia, muchos grosores
Da a todos los archivos de una familia el mismo nombre de font-family y descríbelos con font-weight y font-style. Así, font-weight: 700 o <strong> elige automáticamente el archivo en negrita y el navegador nunca tiene que simular la negrita o la cursiva. Una fuente variable cubre todo un rango en un solo archivo: decláralo con un rango como font-weight: 100 900;.
Nombres habituales de grosor: 100 Thin, 200 Extra Light, 300 Light, 400 Regular, 500 Medium, 600 Semi Bold, 700 Bold, 800 Extra Bold, 900 Black.
Lista de comprobación para una carga rápida
- Sirve WOFF2 y usa
font-display: swap(uoptionalpara no tener ningún salto de diseño). - Precarga solo las una o dos fuentes que se usan en la parte visible inicial;
crossorigines obligatorio en las precargas de fuentes incluso para archivos del mismo origen. - Divide las fuentes grandes con
unicode-rangepara que los visitantes solo descarguen los alfabetos que necesitan. - Almacena en caché los archivos de fuentes durante mucho tiempo (por ejemplo,
Cache-Control: max-age=31536000, immutable).
Preguntas frecuentes
¿Qué es @font-face?
@font-face es la regla at de CSS que carga un archivo de fuente personalizado y le da un nombre de familia. Una vez declarada, usas ese nombre en font-family como cualquier otra fuente. Cada combinación de grosor y estilo necesita su propia regla @font-face con el mismo nombre de font-family.
¿Qué formatos de fuente necesito hoy?
WOFF2 por sí solo es compatible con todos los navegadores actuales y es el más pequeño. Añadir WOFF cubre navegadores muy antiguos como Internet Explorer 9-11. TTF/OTF funcionan pero pesan más, y las fuentes EOT y SVG solo hacen falta para navegadores obsoletos desde hace mucho.
¿Qué hace font-display: swap?
Muestra el texto de inmediato con una fuente alternativa y cambia a la fuente web cuando termina de cargarse, así que el texto nunca queda invisible. fallback y optional limitan lo tarde que puede ocurrir el cambio, lo que reduce los saltos de diseño; block oculta el texto brevemente mientras se carga la fuente.
¿Para qué sirve unicode-range?
unicode-range indica al navegador qué caracteres cubre un archivo de fuente. Si una página no usa ningún carácter de ese rango, el archivo ni siquiera se descarga. Permite dividir una fuente en subconjuntos como latín y cirílico, como hace Google Fonts.
¿Por qué no se carga mi fuente?
Comprueba que las rutas url() sean correctas respecto al archivo CSS, que el servidor envíe la fuente con un tipo MIME correcto y que las fuentes servidas desde otro dominio incluyan una cabecera Access-Control-Allow-Origin. El nombre de familia en font-family debe coincidir exactamente con el nombre de @font-face.
¿Debo incrustar las fuentes en Base64?
Normalmente no. Base64 hace que la fuente sea un 33% más grande, bloquea el análisis del CSS hasta que se descarga y no se puede almacenar en caché por separado. Puede ser útil para una sola fuente de iconos pequeña o un email HTML, pero los archivos de fuente normales con precarga son más rápidos.
¿Puedo alojar una fuente en mi propio servidor?
Depende de la licencia de la fuente. Las fuentes de código abierto, como las que usan la SIL Open Font License, se pueden alojar libremente; las fuentes comerciales suelen necesitar una licencia webfont. Revisa la licencia antes de publicar archivos de fuentes en tu sitio.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.