Generador de pilas de fuentes CSS — Fuentes del sistema con alternativas CJK

Qué hace esta herramienta

El generador de pilas de fuentes CSS crea un valor font-family listo para pegar a partir de fuentes que ya están instaladas en los dispositivos de tus visitantes. Elige un estilo, como la fuente nativa de la interfaz del sistema, una neogrotesca como Inter y Helvetica, una serif de transición como Charter o una monoespaciada pensada para código, y la herramienta lista la mejor fuente de cada plataforma en el orden correcto.

Las pilas siguen la conocida colección Modern Font Stacks, además de la clásica pila -apple-system, BlinkMacSystemFont, "Segoe UI" que muchos sitios todavía usan. Puedes añadir alternativas para texto en chino simplificado, chino tradicional, japonés, coreano, árabe, tailandés o hindi, y fuentes de emojis a color al final.

Cómo se usa

Elige una Pila de fuentes. La vista previa de la izquierda muestra cómo se ve en el dispositivo que estás usando ahora mismo; puedes editar su texto para probar tus propias palabras.
Elige Fuentes para otras escrituras si tus páginas contienen texto en chino, japonés, coreano, árabe, tailandés o hindi.
Activa o desactiva Añadir fuentes de emojis.
Elige una Salida: una declaración font-family simple, una propiedad personalizada de CSS, una entrada fontFamily de Tailwind o una lista simple.
Copia el resultado o descárgalo como archivo .css.

Los nombres que contienen espacios o empiezan por un dígito se ponen entre comillas automáticamente; las palabras clave de CSS como system-ui y sans-serif nunca llevan comillas, porque entrecomillarlas las convertiría en nombres de fuentes que no existen.

Ejemplo

Interfaz del sistema con alternativas para chino simplificado:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Consejos

Usa una pila para el texto principal y una monoespaciada para el código: dos pilas del sistema no cuestan nada de cargar.
La vista previa depende de las fuentes instaladas en tu propio dispositivo, así que revisa la página también en Windows y en un móvil.
Si más adelante añades una fuente web, ponla la primera de la lista y deja la pila del sistema como alternativa.

Preguntas frecuentes

› ¿Qué es una pila de fuentes?

Una lista de familias tipográficas en la propiedad font-family de CSS. El navegador usa la primera fuente instalada en el dispositivo y, si no está, pasa a la siguiente, terminando en una familia genérica como sans-serif.

› ¿Por qué añadir fuentes chinas, japonesas o coreanas?

Las fuentes occidentales como Inter o Charter no tienen glifos CJK. Incluir PingFang SC, Microsoft YaHei o Noto Sans SC antes de la familia genérica hace que el texto chino use una fuente acorde con el estilo en lugar de lo que elija el sistema. Lo mismo ocurre con el árabe, el tailandés y el hindi (devanagari). El ruso, el ucraniano, el griego, el vietnamita, el turco, el polaco y otros idiomas con alfabeto latino o cirílico no necesitan nada más: las fuentes del sistema y Noto de cada pila ya los cubren.

› ¿Por qué las fuentes de emojis van después de sans-serif?

Las fuentes de emojis solo cubren emojis. Ponerlas al final garantiza que las letras y los dígitos normales nunca se muestren con una fuente de emojis, mientras que los emojis siguen teniendo glifos a color en todas las plataformas.

› ¿Estas pilas necesitan descargar fuentes web?

No. Cada pila usa fuentes que vienen con Windows, macOS, iOS, Android o las distribuciones Linux habituales, así que las páginas cargan sin ninguna petición de fuentes.