Generador de pilas de fuentes seguras para la web
Cree cadenas alternativas de familias de fuentes CSS para cualquier fuente con nuestro generador gratuito de pilas de fuentes seguras para la web. Elija su fuente principal, seleccione una familia genérica y elija alternativas seguras para el sistema operativo que cubran Windows, macOS, Linux, iOS y Android. Obtenga un valor, una declaración y una regla CSS listos para pegar: todo el procesamiento se ejecuta localmente en su navegador sin necesidad de registrarse.
Enter your primary font name, choose a generic family, and select OS-safe fallback fonts. The web safe font stack generator builds a complete font-family CSS value ready to copy into your stylesheet. All processing runs locally in your browser.
Enter the exact font name as it appears in your @font-face or Google Fonts import
Select the OS-safe fonts to include as fallbacks. They will appear in the stack in the order shown below, before the generic family keyword.
Copy the font-family value and paste it into your CSS. Make sure your primary font is loaded via @font-face or a Google Fonts <link> tag - the fallbacks only activate when the primary font fails to load.
¿Por qué utilizar nuestro generador de pilas de fuentes seguro para la Web?
- Generación instantánea de pilas de fuentes: cree una pila alternativa completa de familias de fuentes CSS para cualquier fuente en segundos. Nuestro generador de pilas de fuentes seguras para la web produce un valor CSS listo para pegar con su fuente principal, alternativas seguras para el sistema operativo y la familia genérica correcta, sin esperas ni viajes de ida y vuelta al servidor.
- Generador seguro de pilas de fuentes en línea: toda la generación de pilas de fuentes se ejecuta localmente en su navegador. Los nombres de sus fuentes y la salida CSS nunca salen de su dispositivo, lo que garantiza un 100 % de privacidad cada vez que utiliza nuestro generador de pilas de fuentes seguras para la web en línea.
- Generador de pila de fuentes en línea: sin instalación: utilice nuestro generador de pila de fuentes seguro para la web directamente en cualquier navegador sin necesidad de descargas, complementos ni software. Genere pilas de fuentes CSS para cualquier fuente desde cualquier dispositivo, en cualquier lugar, completamente gratis.
- Múltiples opciones de familias genéricas: elija entre seis familias genéricas: sans-serif, serif, monospace, system-ui, cursiva y fantasía. Cada familia viene con un conjunto seleccionado de fuentes alternativas seguras para el sistema operativo que cubren Windows, macOS, Linux, iOS y Android.
Casos de uso comunes del generador de pilas de fuentes seguro para la web
- Tipografía de aplicaciones web: utilice nuestro generador de pilas de fuentes seguras para la web para crear pilas de fuentes sólidas para aplicaciones web que deben representarse de manera consistente en Windows, macOS, Linux, iOS y Android, incluso cuando la fuente web principal no se carga.
- Integración de fuentes de Google: combine cualquier fuente de Google con las alternativas seguras para el sistema operativo adecuadas utilizando nuestro generador de pila de fuentes. Cuando Google Fonts está bloqueado o es lento, su pila alternativa garantiza que los usuarios sigan viendo un tipo de letra visualmente similar en lugar del predeterminado del navegador.
- Diseño de plantillas de correo electrónico: los clientes de correo electrónico suelen bloquear las fuentes web. Utilice nuestro generador de pilas de fuentes seguras para la web para crear pilas de fuentes que se degraden elegantemente a fuentes del sistema como Arial, Georgia o Courier New en Gmail, Outlook y Apple Mail.
- Pilas de fuentes de interfaz de usuario del sistema: cree la pila de fuentes de interfaz de usuario del sistema moderna utilizada por GitHub, Bootstrap y Tailwind CSS. Nuestro generador incluye -apple-system, BlinkMacSystemFont, Segoe UI, Roboto y todos los recursos alternativos adecuados para una sensación de sistema operativo nativo.
- Personalización del marco CSS: anule la pila de fuentes predeterminada en Tailwind CSS, Bootstrap o Material UI generando un valor de familia de fuentes personalizado con la fuente de su marca en la parte superior y las alternativas correctas seguras para el sistema operativo debajo.
- Tipografía que prioriza el rendimiento: reduzca el cambio de diseño (CLS) eligiendo fuentes alternativas que coincidan estrechamente con sus métricas de fuentes principales. Nuestro generador de pila de fuentes seguro para la web le ayuda a elegir alternativas con altura x y ancho de caracteres similares para intercambios de fuentes más fluidos.
¿Qué es una pila de fuentes segura para la Web?
Una pila de fuentes seguras para la web es un valor de familia de fuentes CSS que enumera varias fuentes en orden de prioridad: primero la fuente principal, seguida de las fuentes alternativas seguras para la web y termina con una palabra clave de familia genérica como sans-serif o serif. Cuando un navegador no puede cargar la fuente principal, baja en la pila hasta encontrar una fuente instalada en el sistema operativo del usuario. Las fuentes seguras para la web son fuentes que están preinstaladas en prácticamente todos los principales sistemas operativos (Windows, macOS, Linux, iOS y Android), lo que las convierte en alternativas confiables. Nuestro generador de pilas de fuentes seguras para la web crea el valor CSS completo para usted con las alternativas adecuadas para la familia genérica elegida.
Cómo funciona nuestro generador de pilas de fuentes seguras para la web
- Ingrese su fuente principal: escriba el nombre exacto de su fuente principal: una fuente de Google, una fuente web personalizada o cualquier fuente cargada a través de @font-face. Utilice los ajustes preestablecidos de fuentes populares para acceder rápidamente a opciones comunes como Inter, Roboto o Playfair Display.
- Procesamiento instantáneo basado en navegador: seleccione una familia genérica y verifique las fuentes alternativas seguras para el sistema operativo que desea incluir. Haga clic en "Generar pila de fuentes" y el generador generará instantáneamente el valor CSS completo de la familia de fuentes: todo el procesamiento se ejecuta localmente en su navegador sin llamadas al servidor.
- Copie o descargue el resultado: copie el valor CSS, la declaración o la regla completa con un solo clic, o descárguelo como un archivo .css. La vista previa en vivo muestra cómo se representa la pila en su navegador actual.
Qué se incluye en la pila de fuentes
- Fuente principal: su fuente web o personalizada: la primera opción que prueba el navegador. Debe cargarse mediante @font-face o una etiqueta <link> de Google Fonts para que el navegador lo encuentre.
- Fuentes alternativas seguras para el sistema operativo: fuentes del sistema preinstaladas que coinciden estrechamente con el estilo de su fuente principal, que cubren Windows (Arial, Segoe UI, Consolas), macOS (Helvetica Neue, -apple-system, Menlo), Linux (Ubuntu, DejaVu Sans Mono) y plataformas móviles.
- Palabra clave de familia genérica: la red de seguridad final: una palabra clave CSS como sans-serif o monoespacio que indica al navegador que use su propia fuente predeterminada de ese estilo si no hay nada más disponible en la pila.
- Nombres de fuentes entre comillas: los nombres de fuentes que contienen espacios se incluyen automáticamente entre comillas dobles (por ejemplo, "Times New Roman") según lo exige la especificación CSS.
Mejores prácticas importantes para la pila de fuentes
Termine siempre su pila de fuentes con una palabra clave familiar genérica: es el único recurso alternativo garantizado que admiten todos los navegadores. Los nombres de fuentes con espacios deben ir entre comillas; Los nombres de una sola palabra y las palabras clave CSS como sans-serif no deben citarse. La pila system-ui (utilizada por GitHub, Bootstrap 5 y Tailwind CSS) es la mejor opción para los componentes de la interfaz de usuario porque se representa en la fuente nativa del sistema operativo, lo que mejora el rendimiento percibido y reduce el cambio de diseño. Para el cuerpo del texto, elija opciones alternativas con altura x y ancho de caracteres similares a su fuente principal para minimizar el cambio de diseño acumulativo (CLS) durante la carga de la fuente.
Preguntas frecuentes
Un generador de pilas de fuentes seguras para la web crea un valor de familia de fuentes CSS que enumera su fuente principal seguida de fuentes alternativas seguras para el sistema operativo y una palabra clave de familia genérica. Nuestro generador de pilas de fuentes seguras para la web se ejecuta completamente en su navegador (no se envían datos a ningún servidor) y genera el valor CSS exacto listo para pegar en su hoja de estilo.
Las fuentes seguras para la web son fuentes que están preinstaladas en prácticamente todos los principales sistemas operativos: Windows, macOS, Linux, iOS y Android. Los ejemplos incluyen Arial, Helvetica, Georgia, Times New Roman, Courier New y Verdana. Debido a que siempre están disponibles, son alternativas confiables cuando una fuente web personalizada no se carga.
Absolutamente. Toda la generación de pilas de fuentes ocurre localmente en su navegador usando JavaScript. Sus nombres de fuentes y resultados CSS nunca se envían a ningún servidor, ni se almacenan ni se registran. Sus datos permanecen completamente privados en su dispositivo.
Sí. Nuestro generador de pilas de fuentes seguras para la web es 100% gratuito, sin registro, sin cuenta y sin límites de uso. Genere pilas de fuentes para cualquier fuente tantas veces como necesite, completamente gratis y para siempre.
La especificación CSS requiere que los nombres de fuentes que contienen espacios estén entre comillas dobles o simples, por ejemplo, "Times New Roman" o "Helvetica Neue". No se deben citar los nombres de fuentes de una sola palabra ni las palabras clave genéricas de familias como sans-serif. Nuestro generador de pilas de fuentes seguro para la web maneja las cotizaciones automáticamente.
La pila de fuentes system-ui utiliza la fuente nativa de la interfaz de usuario del sistema operativo: San Francisco en macOS/iOS, Segoe UI en Windows y Roboto en Android. Lo utilizan GitHub, Bootstrap 5 y Tailwind CSS para componentes de interfaz de usuario porque se representa en la fuente nativa del usuario, lo que mejora el rendimiento percibido y reduce el cambio de diseño. Úselo para elementos de la interfaz de usuario como botones, etiquetas y navegación.
CLS se produce cuando el navegador cambia de una fuente alternativa a la fuente web cargada, lo que provoca que el texto se redistribuya. Para minimizar CLS, elija fuentes alternativas con altura x y ancho de caracteres similares a su fuente principal. Por ejemplo, Arial es un buen recurso para el Inter porque comparten proporciones similares. También puede utilizar los descriptores CSS de ajuste de tamaño y anulación de ascenso en @font-face para ajustar las métricas alternativas.
Sí. Arial es el estándar sans-serif en Windows y Android, mientras que Helvetica es el estándar en macOS e iOS. Incluir ambos garantiza la coincidencia visual más cercana en todas las plataformas. Nuestro generador de pilas de fuentes seguras para la web incluye ambas de forma predeterminada en el conjunto alternativo sans-serif.
Sí. Los clientes de correo electrónico como Outlook, Gmail y Apple Mail a menudo bloquean las fuentes web, por lo que una pila alternativa sólida es esencial para la tipografía del correo electrónico. Utilice nuestro generador de pilas de fuentes seguras para la web para crear una pila que se degrade elegantemente a las fuentes del sistema. Para el correo electrónico, dé prioridad a fuentes como Arial, Georgia, Verdana y Courier New, ya que cuentan con la más amplia compatibilidad con clientes de correo electrónico.