¿Qué es un probador de fuentes?

Un probador de fuentes es una herramienta que te permite obtener una vista previa de cómo se ve una tipografía antes de usarla en un diseño o sitio web. En lugar de instalar una fuente en tu sistema operativo o incrustarla en un proyecto, puedes cargarla directamente en el navegador y ver exactamente cómo se representan las letras, números y símbolos. Esto es especialmente útil para evaluar fuentes personalizadas o desconocidas, ya que el carácter visual de una tipografía — sus proporciones, peso, espaciado y ritmo — solo puede juzgarse en contexto con texto real.

Los navegadores modernos exponen la FontFace API, que hace posible registrar una fuente desde un archivo local y aplicarla a cualquier elemento de la página sin cargar nada en un servidor. Todo el renderizado ocurre localmente, por lo que el archivo de fuente nunca abandona tu dispositivo.

Descripción de la herramienta

Este Probador de Fuentes te permite cargar un archivo de fuente (TTF, OTF, WOFF o WOFF2) y obtener una vista previa instantánea con configuraciones de tipografía completamente personalizables. Puedes ajustar el tamaño, altura de línea, espaciado de letras, espaciado de palabras, peso, estilo, alineación y colores, y luego ver el resultado renderizado en vivo en múltiples especímenes — texto de muestra, alfabeto completo, dígitos, símbolos y una escala de tamaños — para evaluar la tipografía desde todos los ángulos.

La fuente se carga completamente en el navegador; no se requiere carga, cuenta ni instalación.

Ejemplos

Entrada: Un archivo .woff2 personalizado más el texto de muestra The quick brown fox jumps over the lazy dog.

Salida: Una vista previa en vivo de esa oración renderizada en la fuente cargada con el tamaño, peso y espaciado elegidos, más paneles separados que muestran el alfabeto en mayúsculas, alfabeto en minúsculas, dígitos, símbolos y el mismo pangrama repetido a 12, 16, 20, 24, 32, 48, 64 y 96 píxeles.

Características

  • Carga local de fuentes: Suelta un archivo TTF, OTF, WOFF o WOFF2 y verlo aplicado inmediatamente
  • Controles de tipografía completos: Ajusta tamaño de fuente, altura de línea, espaciado de letras, espaciado de palabras, peso, cursiva y alineación
  • Personalización de colores: Elige colores de texto y fondo para probar contraste y combinaciones coherentes con la marca
  • Múltiples especímenes: Obtén una vista previa de la fuente con texto personalizado, alfabeto completo, dígitos, símbolos y una escala de tamaños
  • Respetuosa con la privacidad: Los archivos se procesan en tu navegador y nunca se cargan en un servidor

Casos de uso

  • Evaluar una fuente comprada o descargada: Prueba una tipografía en diferentes tamaños, pesos y colores antes de comprometerte con una marca o proyecto
  • Probar el renderizado de webfonts: Comprueba cómo un archivo .woff2 se muestra realmente en el navegador, incluidos el kerning, espaciado y estilo cursiva
  • Diseñar tipografía para un sitio web o aplicación: Itera rápidamente en tamaño de fuente, altura de línea y espaciado de letras para encontrar la combinación correcta

Formatos soportados

  • TTF (TrueType Font)
  • OTF (OpenType Font)
  • WOFF (Web Open Font Format)
  • WOFF2 (Web Open Font Format 2.0)

Opciones explicadas

  • Texto de muestra — El texto que se muestra en el panel de vista previa principal; admite múltiples líneas.
  • Tamaño de fuente — Tamaño del texto de vista previa principal en píxeles (8–200). Los paneles de alfabeto, dígitos y símbolos se renderizan al 75% de este valor.
  • Altura de línea — Espaciado vertical entre líneas, expresado como porcentaje del tamaño de fuente (50–300%).
  • Espaciado de letras — Espacio adicional entre caracteres individuales, en píxeles (-10 a 30). Los valores negativos cierran el texto.
  • Espaciado de palabras — Espacio adicional entre palabras, en píxeles (-10 a 50).
  • Peso de fuente — Peso numérico de 100 (Thin) a 900 (Black). Solo los pesos realmente incluidos en el archivo de fuente se renderizarán de forma distintiva; otros son simulados por el navegador.
  • Cursiva — Activa font-style: italic. Si la fuente no tiene una variante cursiva, el navegador puede sintetizar una versión inclinada.
  • Alineación de texto — Alineación izquierda, centro, derecha o justificada para los paneles de vista previa.
  • Color de texto / Color de fondo — Colores utilizados en cada panel de vista previa, útil para obtener una vista previa de la fuente en su fondo previsto.

Consejos

  • Algunas fuentes solo incluyen un único peso; cambiar a negrita o delgada puede verse idéntico o recurrir a un estilo sintético del navegador. Consulta la documentación de la fuente si un peso se ve incorrecto.
  • Usa el panel de escala de tamaños para detectar fuentes que se renderizan mal en tamaños pequeños — una tipografía que se ve elegante a 64px puede volverse ilegible a 12px.
  • Prueba tu fuente contra fondos claros y oscuros; los pesos delgados a menudo desaparecen en fondos oscuros y necesitan aumentarse.
  • Compara los paneles de mayúsculas y minúsculas lado a lado para evaluar la altura x, altura de mayúsculas y ritmo general.

Limitaciones

  • Los ejes de fuentes variables más allá del peso estándar e cursiva no se exponen individualmente.
  • Las características OpenType como ligaduras, alternativas estilísticas y versalitas se renderizan usando los valores predeterminados del navegador y no se pueden alternar en la interfaz de usuario.
  • Los archivos de fuente muy grandes pueden tardar un momento en cargarse y analizarse.