Sustitución de Fuentes en Figma: Cómo se Reemplazan y Registran las Fuentes Faltantes

Importa una página web en vivo a Figma y hay una buena probabilidad de que al menos una fuente llegue mal. Eso no es un error del importador. Son dos modelos de fuentes distintos encontrándose por primera vez: el navegador descargó una fuente en el momento en que cargó la página, pero Figma solo reconoce fuentes que ya están instaladas en tu computadora. La sustitución de fuentes en Figma es lo que cubre ese vacío. Importa porque una fuente sustituida puede cambiar en silencio el largo de línea, el salto de texto y el ritmo vertical de todo un diseño.

Este artículo repasa por qué ocurre el desajuste, cómo Figma detecta y reemplaza una fuente faltante por su cuenta, qué sustituye UnHTML de forma predeterminada al convertir una página, cómo leer el informe de importación que produce cada ejecución, y dónde entra realmente la licencia de fuentes cuando estás mirando la tipografía de otra persona dentro de tu propio archivo.

Por qué faltan las fuentes de una página, para empezar

Un navegador muestra las fuentes de una página mediante la regla CSS @font-face, que enumera una o más fuentes para una familia tipográfica dada y deja que el navegador elija la primera que pueda usar. La regla @font-face es explícita sobre el orden: una fuente local() debe ir antes que una url(), de modo que se use primero una fuente ya instalada en la máquina del visitante antes de descargar nada, y las pistas format() o tech() más específicas deben ir antes que las menos específicas. Los archivos de fuente referenciados así son del mismo origen por defecto, utilizables en otro lugar solo si el servidor envía encabezados CORS que lo permitan.

Nada de eso exige que la fuente llegue a tocar el gestor de fuentes del visitante. Una página puede mostrar su título en una tipografía de exhibición pagada y cuidadosamente licenciada sin pedirle nunca al navegador que la instale localmente. El descriptor font-display incluso controla lo que ve un visitante mientras esa descarga sigue en curso, mostrando temporalmente una fuente del sistema y reemplazándola cuando llega el archivo real. Desde el punto de vista del lector, todo el intercambio es invisible.

Figma funciona al revés. Una capa de texto guarda una fuente por su nombre de familia y estilo, y espera que esa fuente exacta esté presente en tu gestor de fuentes local. Cuando no lo está, Figma no tiene nada propio a lo cual recurrir, así que simplemente marca la capa. Esa única diferencia, descargar frente a instalar, es la razón completa por la que una página que se veía correcta en el navegador puede entregarle a una herramienta de importación una fuente a la que nunca tuvo acceso.

Cómo detecta Figma una fuente faltante por su cuenta

La detección propia de Figma es directa una vez que sabes qué buscar. Una fuente faltante muestra un pequeño icono en la barra lateral izquierda del archivo. Selecciona una capa de texto afectada y la misma marca aparece junto al nombre de la fuente en la barra lateral derecha. Las causas habituales: una fuente que simplemente no está instalada, un estilo faltante dentro de una familia por lo demás instalada, o colaboradores que usan versiones distintas de la misma fuente.

A partir de ahí, el panel Missing fonts (fuentes faltantes) enumera cada familia y estilo faltante en el archivo y te deja elegir un reemplazo para cada uno desde un menú desplegable. Hacer clic en Replace fonts (reemplazar fuentes) aplica el cambio a todo el archivo, para cada colaborador, incluidos quienes sí tienen acceso a la fuente original. Figma recomienda guardar una versión antes, ya que el reemplazo no queda limitado solo a tu propia vista.

Vale la pena tener en cuenta dos límites. Figma solo admite archivos de fuente .TTF y .OTF, y no admite fuentes personalizadas en absoluto en ChromeOS o Linux, donde el selector de fuentes queda limitado a Google Fonts sin importar lo que esté instalado en la máquina. Si tu equipo trabaja entre plataformas distintas, eso por sí solo puede forzar una sustitución que un usuario de Mac o Windows nunca vería.

Qué sustituye UnHTML, y cómo cambiarlo

El comportamiento predeterminado de UnHTML sigue la misma lógica que el propio manejo de fuentes faltantes de Figma, solo que aplicado automáticamente en el momento de la importación. Cualquier fuente que el importador no tenga localmente se sustituye por Inter, y la familia de reserva es configurable si Inter no es la opción adecuada para un proyecto dado. Nada de la sustitución ocurre en silencio. Cada sustitución queda registrada en el informe que produce la importación.

Vale la pena leer ese informe con atención, no solo por encima. Para preguntas de diseño más exigentes, como qué marcos no pudieron mantener su estructura y recurrieron a la posición absoluta, el artículo complementario sobre qué sobrevive a la conversión a capas cubre ese camino de reserva con más detalle. Los detalles de precios y configuración para ajustar la sustitución predeterminada están en la página de precios.

Cómo leer el informe de importación

Cada ejecución produce un informe que cubre tres cosas: qué fuentes se sustituyeron y por qué se reemplazaron, qué marcos volvieron a la posición absoluta porque su diseño no se pudo representar en auto layout, y qué imágenes se omitieron.

Léelo antes de publicar un archivo, no después. Una fuente de título sustituida cambia el ancho medido de los caracteres, y eso puede desplazar los puntos de salto de línea en toda una sección de una forma fácil de pasar por alto a simple vista. Dos párrafos que se alineaban bien en la página original pueden terminar una línea antes o después una vez que Inter, más angosta que muchas tipografías de exhibición, toma el control. Un marco que volvió a la posición absoluta se comporta de forma distinta en cuanto cambia el largo del contenido, ya que deja de redimensionarse como lo haría un marco con auto layout. Trata el informe como una lista de tareas, no como un registro que revisas por encima después del hecho, y resolverás ambos problemas mientras todavía son baratos de arreglar, antes de que un cliente o compañero de equipo abra el archivo y empiece a preguntar por qué un título se corta de forma rara.

Licencias de fuentes web, en términos simples

La licencia de fuentes es donde la decisión de sustitución deja de ser puramente cosmética. Los formatos de fuente web existen por una razón de licencia tanto como por una razón técnica: muchos proveedores de tipografía que no licencian un archivo TrueType u OpenType en bruto para uso web sí están dispuestos a licenciar la misma familia empaquetada como WOFF o WOFF2, porque el formato empaquetado limita cómo se puede reutilizar el archivo. Esa es exactamente la razón por la que una fuente que se ve bien en una página no se puede simplemente descargar e instalar como fuente de escritorio sin revisar lo que permite realmente la licencia.

En la práctica, eso significa que la licencia de fuente web de una página casi nunca cubre usar ese mismo archivo como fuente de escritorio instalada dentro de una herramienta de diseño, incluso para trabajo interno. Una licencia de fuente web y una licencia de escritorio suelen venderse como partidas separadas del mismo proveedor, a veces a precios distintos, y una fuente perfectamente válida para servir desde un servidor no es automáticamente válida para instalar en una máquina. La opción honesta, y la que adopta por defecto una sustitución de fuente, es poner una alternativa y registrarla, y luego decidir de forma deliberada si licenciar o conseguir la familia original para el archivo final, de la misma manera en que revisarías los términos de una foto de stock antes de reutilizarla en un contexto nuevo. Esto no es una reproducción exacta al píxel de la tipografía de la página original, y el informe de importación existe precisamente para que esa diferencia siga siendo visible en lugar de quedar oculta.

Una fuente faltante en una importación a Figma no es realmente un fallo. Es el resultado previsible de dos modelos de fuentes, descargar e instalar, encontrándose por primera vez. Lo que importa es si la sustitución es visible: revisa el informe de importación en cada importación, y trata cada cambio de fuente como una decisión que hay que tomar de forma deliberada, no un detalle cosmético que se puede pasar por alto.