Generador de pila de reserva de fuentes
Genere pilas de familias de fuentes CSS listas para producción con respaldos multiplataforma adecuados. Elija entre más de 90 fuentes seleccionadas de Google en 5 categorías: Sans Serif, Serif, Monospace, Display y Handwriting. Cada categoría viene con múltiples opciones de pila de respaldo seleccionadas que cubren fuentes de sistemas macOS, Windows, Linux, iOS y Android. Obtenga una vista previa de su pila en vivo, copie la declaración CSS, el fragmento @import o cualquier variante de la pila, todo con un solo clic. Completamente gratis, no es necesario registrarse.
Select a primary font and a fallback category to generate your CSS font-family stack.
Or switch to "Quick Presets" for ready-to-use recommendations.
Acerca de las pilas de fuentes alternativas
- Una pila de familias de fuentes es una lista de fuentes separadas por comas en su CSS. El navegador prueba cada fuente en orden; si la fuente principal no está instalada o no se carga, vuelve a la siguiente. Una pila bien diseñada garantiza que el texto sea siempre legible, incluso cuando su fuente web personalizada no esté disponible.
- Esta herramienta combina la fuente principal elegida (Google Font o cualquier nombre de fuente personalizado) con listas alternativas del sistema seleccionadas y organizadas por categoría. Cada categoría (Sans Serif, Serif, Monospace, Display y Handwriting) tiene múltiples variantes de pila, desde básica (Arial, Helvetica, sans-serif) hasta completa (fuentes del sistema Apple, Segoe UI, Roboto, etc.).
- Incluso con font-display: swap, hay un breve momento en el que la fuente alternativa se representa antes de que se cargue la fuente personalizada. Una buena pila alternativa con métricas similares (alto x, ancho, peso) reduce el cambio de diseño acumulativo (CLS) y proporciona una experiencia de lectura más fluida. Esto es fundamental para Core Web Vitals.
- Siempre haga coincidir la categoría alternativa con su fuente principal. Una fuente principal serif debe recurrir a fuentes del sistema serif, no sans-serif. Las categorías no coincidentes provocan cambios visuales discordantes cuando se representa el respaldo. Esta herramienta selecciona automáticamente la categoría de fuente principal como categoría alternativa predeterminada.
Preguntas frecuentes
Una pila de familias de fuentes es una lista priorizada de fuentes en su CSS. El navegador intenta utilizar la primera fuente; si no está disponible o no se carga, intenta con el siguiente. Esto garantiza que el texto siempre se muestre en una fuente legible independientemente de lo que haya instalado el usuario.
Esta herramienta genera pilas integrales multiplataforma que cubren macOS, Windows, Linux, iOS, Android y ChromeOS. Escribirlos manualmente es propenso a errores: es posible que olvide fuentes específicas de la plataforma o utilice citas incorrectas. La herramienta garantiza que cada pila sea correcta y completa.
Cada categoría tiene múltiples variantes. La pila 1 (recomendada) es la más completa: cubre todos los principales sistemas operativos con fuentes nativas del sistema. La pila 2 es más corta para compatibilidad con navegadores antiguos. La pila 3 es el recurso mínimo seguro para la web. La pila recomendada es la mejor para la mayoría de los proyectos.
Los nombres de fuentes que contienen espacios (como "Times New Roman") deben ir entre comillas simples o dobles. NO se deben citar las palabras clave genéricas (serif, sans-serif, monoespacio, cursiva) y las fuentes del sistema que comienzan con un guión (como -apple-system). La herramienta maneja las cotizaciones correctamente.
Sí. Utilice el selector de fuentes para elegir entre más de 90 fuentes seleccionadas de Google o escriba cualquier nombre de fuente personalizado en el cuadro de búsqueda. La herramienta genera la pila para cualquier nombre de fuente que ingrese.
Una pila alternativa bien adaptada reduce el cambio de diseño acumulativo (CLS). Cuando la fuente alternativa tiene métricas similares a las de su fuente personalizada, el texto no cambia cuando se carga la fuente personalizada. Combinado con font-display: swap, esto proporciona el mejor equilibrio entre rendimiento y coherencia visual.
Sí. Agregue la pila a su tailwind.config.js en theme.extend.fontFamily. Por ejemplo: fontFamily: { encabezado: ['Playfair Display', 'Georgia', 'serif'] }. Luego use el encabezado de fuente de clase de utilidad en su marcado.
Sí, los clientes de correo electrónico admiten muy pocas fuentes. La mayoría solo procesa fuentes seguras para la web como Arial, Georgia, Times New Roman, Courier y Verdana. Nuestras pilas de respaldo básicas Sans Serif y Serif funcionan bien para plantillas de correo electrónico.