Vista previa de fuentes
Previsualiza tu texto en cualquier fuente instalada en este dispositivo, o sube un archivo de fuente, y copia el CSS.
Lista todas las fuentes instaladas en este dispositivo. Solo en navegadores Chromium: el navegador pide permiso una vez.
Todavía no has subido ninguna.
TTF, OTF, WOFF y WOFF2 de hasta 20 MB. Las fuentes subidas solo se registran en esta página: no se envían a ninguna parte y se descartan al recargar.
font-family: system-ui; font-size: 44px; font-weight: 400; font-style: normal; letter-spacing: 0px; line-height: 1.35; text-align: left; text-transform: none; color: #0f172a; background-color: #ffffff;
¿Qué es una herramienta de vista previa de fuentes?
La mayoría de las vistas previas de fuentes en la web muestran siempre la misma lista corta de fuentes «seguras para la web»: una lista que ya te sabes y que no dice nada sobre las fuentes realmente instaladas en tu equipo. Esta página hace lo contrario y parte de tu propio sistema.
Hay tres formas de meter una fuente. Las familias genéricas (system-ui, sans-serif, serif, monospace) funcionan en cualquier navegador. «Leer fuentes locales» enumera, mediante la Local Font Access API del navegador, todas las fuentes instaladas en este dispositivo y las coloca en el selector: aparecen al instante, porque los contornos ya están en tu equipo y no se descarga nada. O sube un archivo de fuente (TTF, OTF, WOFF o WOFF2) y la página lo registra para esta sesión, así puedes revisar una tipografía de marca con licencia sin instalarla.
Elige una fuente, escribe tu propio texto y ajusta tamaño, peso, estilo, espaciado, interlineado, colores y alineación. La línea del juego de caracteres muestra cómo se comportan cifras y signos de puntuación, y el bloque CSS está listo para copiar, incluido el esqueleto @font-face cuando la fuente activa viene de un archivo subido.
Ni tu texto ni tus archivos salen del navegador.
Cómo se usa
Primeros pasos
- Elige una fuente en el panel «Origen de la fuente». Las familias genéricas funcionan en todas partes; pulsa «Leer fuentes locales» para listar todo lo instalado en este dispositivo.
- Para previsualizar una fuente que ya tienes como archivo, pulsa «Subir archivo de fuente» y elige un TTF, OTF, WOFF o WOFF2. Se registra para esta sesión y aparece en el mismo selector.
- Escribe el texto que quieres revisar: un titular, el rótulo de un botón, el nombre de un producto.
- Ajusta tamaño, peso, estilo, espaciado entre letras, interlineado, alineación, mayúsculas y los dos colores. La vista previa aplica exactamente las mismas propiedades CSS que tu hoja de estilos.
- Copia el bloque CSS. Si la fuente se subió, incluye además un esqueleto @font-face donde el nombre original del archivo ocupa el lugar de la ruta.
Consejos para resultados fiables
- La lista enumerada es exacta, pero describe solo este dispositivo. Lo que aquí está instalado no lo está necesariamente en los equipos de tus visitantes: conserva una pila de reserva en el CSS de producción.
- El listado de fuentes locales es exclusivo de Chromium y exige un contexto seguro (HTTPS o localhost). En Safari y Firefox el botón se oculta y se indica el motivo; la subida sigue disponible.
- Una familia con varios pesos o estilos aparece una sola vez en el selector. Usa el control de peso y el interruptor de cursiva para moverte entre los cortes que realmente incluye.
- Las fuentes subidas solo viven en memoria: al recargar se descartan y no se escribe nada en el disco. Es una decisión deliberada, no una limitación que se pueda configurar.
- Los archivos CJK grandes (10 MB o más) tardan un momento en analizarse; el selector se actualiza en cuanto la fuente se decodifica.
Casos de uso
Cómo se gestionan las fuentes locales y las subidas
Aquí trabajan dos API del navegador sin relación entre sí, y su comportamiento es muy distinto.
El listado de fuentes instaladas usa la Local Font Access API: window.queryLocalFonts() devuelve un registro por cada corte instalado, con su familia, nombre completo, nombre PostScript y estilo. La página agrupa esos registros por familia, los ordena y los entrega al selector. Para renderizar no hace falta descargar nada: el nombre de familia pasa directamente al CSS y los contornos los aporta el sistema operativo, exactamente igual que con tu propia hoja de estilos. Chromium ofrece la API tras un permiso único; Safari y Firefox no la implementan, así que allí la entrada se oculta en lugar de dejar que falle.
La subida usa la Font Loading API: el archivo se lee en un ArrayBuffer, se entrega a new FontFace(family, buffer), se carga y se añade a document.fonts. A partir de ese momento la fuente se comporta como cualquier otra familia y puede referenciarse por su nombre en el CSS.
- queryLocalFonts() exige un contexto seguro (HTTPS o localhost) y rechaza la petición con NotAllowedError si se descarta el diálogo de permiso; el panel informa de ambos casos en lugar de lanzar una excepción.
- Una misma familia puede aparecer con varios estilos. La lista se deduplica por nombre de familia, de modo que cada tipografía aparece una vez y el control de estilo elige el corte.
- FontFace acepta TTF, OTF, WOFF y WOFF2. Un archivo dañado o de formato no admitido hace que load() falle; la página lo avisa en lugar de dejar una entrada rota en el selector.
- Las subidas se guardan solo en memoria: sin peticiones de red, sin escritura en disco, sin localStorage. Por eso no sobreviven a una recarga.
- Las familias genéricas las resuelve internamente el navegador y no necesitan ninguna API, así que siguen disponibles donde las otras dos vías están cerradas.
Ejemplos
Listar las fuentes instaladas en este dispositivo
const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]
const families = [...new Set(faces.map((f) => f.family))].sort();
// Lo elegido se pasa tal cual al CSS: los contornos los da el sistema,
// no se descarga ningún archivo
element.style.fontFamily = `"${families[0]}", sans-serif`;Registrar un archivo subido
const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load(); // falla si el archivo está dañado o el formato no vale
document.fonts.add(face);
// a partir de aquí, exactamente igual que una fuente instalada
element.style.fontFamily = '"Aurora Sans", sans-serif';El bloque CSS de una fuente subida
@font-face {
font-family: "Aurora Sans";
src: url("./AuroraSans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;
/* La ruta de src es un marcador: cámbiala por la dirección
desde la que sirves el archivo. */Preguntas frecuentes
¿Por qué no aparece el botón «Leer fuentes locales» en mi navegador?
La Local Font Access API solo está implementada en navegadores Chromium (Chrome, Edge, Opera, Brave) y exige un origen seguro (HTTPS o localhost). En Safari y Firefox el botón se oculta y el panel explica el motivo; tanto subir un archivo como las familias genéricas siguen funcionando.
¿Se envía algo a un servidor al leer mis fuentes instaladas?
No. El navegador muestra un diálogo de permiso y, tras tu aceptación, la página solo recibe nombres de familias y estilos. No se leen datos de fuentes, no se sube nada y la lista no se transmite a ninguna parte.
¿Las fuentes que subo se guardan o se envían a algún sitio?
Ni lo uno ni lo otro. El archivo se lee en memoria, se registra en el conjunto de fuentes del navegador y se descarta al cerrar o recargar la página. No hay peticiones de red, ni escritura en disco, ni localStorage.
¿Por qué desaparecen mis fuentes subidas al recargar?
Porque la página las mantiene en memoria de forma deliberada. Conservarlas obligaría a escribir el archivo de fuente en el almacenamiento del navegador, y una herramienta de vista previa no tiene motivos para guardar una copia de un archivo que ya tienes. Vuelve a subirlo para continuar.
¿Qué formatos puedo subir?
TTF, OTF, WOFF y WOFF2, hasta 20 MB por archivo: son los cuatro formatos de contenedor que acepta el FontFace del navegador. Las colecciones TrueType (.ttc) agrupan varios cortes en un solo archivo y no se admiten; exporta los cortes por separado.
¿Por qué algunos pesos se ven mal o demasiado gruesos?
Cuando una familia no incluye el peso solicitado, el navegador lo sintetiza: la falsa negrita engrosa los contornos y la falsa cursiva los inclina. Si solo la 600 se ve sucia mientras la 400 y la 700 están bien, es que la familia no trae una 600.
¿Puedo usarla para saber qué tienen instalado mis visitantes?
No, y ningún sitio web puede. El listado exige un diálogo de permiso explícito en el equipo del visitante, así que una página nunca puede inventariar a escondidas las fuentes de un desconocido. La lista de aquí describe únicamente este dispositivo, y por eso en el CSS de producción debe quedar una pila de reserva.
¿Qué pongo en la URL src de @font-face?
La ruta desde la que tu propio build sirve el archivo de fuente, por ejemplo /fonts/AuroraSans.woff2. La palabra clave format() se genera correctamente a partir de la extensión, así que solo hay que sustituir la URL.
Herramientas relacionadas
Visor SVG
Visor y editor SVG en línea con vista previa en tiempo real. Edita código SVG, visualiza cambios al instante y descarga archivos SVG. Herramienta esencial para desarrolladores y diseñadores.
Selector de Color
Selector de color en línea gratuito con conversión de formatos HEX, RGB, HSL. Genera paletas de colores, obtiene colores web, mejora la eficiencia de diseño.
Generador de Código de Barras
Generador de código de barras online gratuito. Soporta formatos CODE128, EAN13, EAN8, UPC, CODE39, ITF14. Personalice colores y dimensiones, genere y descargue códigos de barras en PNG o SVG.
Generador de Fondo de Color Sólido
Genera imágenes de fondo de color sólido en línea. Personaliza color y tamaño con preajustes (1080p, 2K, 4K), descarga como PNG/JPG. Procesamiento local, privacidad protegida.
Generador de Código QR
Generador de código QR en línea gratuito soportando texto, URL, tipos vCard. Personaliza estilo, color, tamaño, descarga imágenes de alta calidad instantáneamente.
Generador de Gradientes
Generador de gradientes CSS en línea gratuito para crear fondos de gradiente lineal y radial. Ajuste visual de colores, copia código CSS con un clic.
