La tasa de sustitución de fuentes en una importación típica de web a Figma

Importas una página en Figma y un aviso dice que se sustituyeron tres fuentes. ¿Es normal, o algo salió mal? Según los datos de fuentes web de 2025, la respuesta honesta depende casi por completo de una sola cosa: si las fuentes de la página vienen de Google Fonts o de un archivo autohospedado. Un conjunto más pequeño de detalles de formato y de plataforma decide el resto.

Google Fonts representa aproximadamente la mitad de todo el uso de fuentes en la web, y Figma puede obtener cualquier Google Font a demanda, así que esas capas de texto normalmente se importan con la familia intacta. La sustitución se concentra en un grupo más reducido: tipografías autohospedadas que no son de Google, fuentes variables a las que les falta un estilo, y fuentes de iconos. A continuación: los números, por qué Google Fonts casi siempre sobrevive una importación, qué fuentes realmente se cambian, y cómo leer un informe de importación cuando ocurre.

Los números detrás de la sustitución de fuentes

El conjunto de datos público más claro sobre esto viene del Web Almanac 2025 de HTTP Archive, que rastrea las solicitudes de fuentes y el CSS de millones de páginas activas. Según ese rastreo, el 88% de las páginas usa al menos una fuente web, un poco más que el 87% de 2024. El 12% restante depende solo de fuentes del sistema, donde la sustitución nunca entra en juego. No hay ninguna fuente personalizada que resolver.

Entre las páginas que sí usan fuentes web, la distribución del hospedaje importa más que el número general. El 72% autohospeda al menos un archivo de fuente, el 36% autohospeda exclusivamente sin ningún servicio de terceros, y otro 36% combina autohospedaje con Google Fonts. Solo el 13% depende exclusivamente de Google Fonts. En conjunto, Google Fonts aparece en el 54% de las páginas de escritorio y el 47% de las páginas móviles, sola o junto a otra fuente.

Dicho sin rodeos: el 36% de páginas que autohospeda en exclusiva, más la mitad autohospedada del 36% mixto, es más o menos de donde vienen las sustituciones de una importación típica. La porción de Google Fonts, en cambio, es prácticamente un no problema.

Esto es un desarrollo reciente, no una constante. Las fuentes web personalizadas estaban en cifras de un solo dígito bajo cuando HTTP Archive empezó a rastrearlas en 2011, superaron la mitad de los sitios hacia 2015, y alcanzaron alrededor del 75% de adopción hacia 2020 antes de subir al 87% y 88% vistos en 2024 y 2025. A medida que la adopción crecía, también crecían las probabilidades de que cualquier página que importes tenga al menos una fuente que Figma deba resolver, de una forma u otra. Hace una década la pregunta de la sustitución casi no aplicaba. Hoy aplica a casi cualquier importación.

Por qué Google Fonts casi nunca se sustituye

El propio aviso de fuente faltante de Figma siempre lista a Google Fonts como disponible, porque Figma las obtiene a demanda en lugar de depender de lo que ya tengas instalado en tu máquina. Una fuente que se resuelve como Google Font no necesita instalación local, licencia, ni ningún paso extra. Simplemente funciona.

Una página construida con Roboto, Open Sans, o Poppins, las tres fuentes de texto con nombre más comunes en el rastreo de 2025 después de la fuente de iconos Font Awesome, normalmente se importa con la familia intacta y sin ninguna entrada en el informe de sustitución. Importa una página construida con la tipografía predeterminada de un framework popular, y hay bastante probabilidad de que no veas ni una sola sustitución de fuente.

Toma una página de aterrizaje típica: un encabezado en Poppins, el cuerpo de texto en Open Sans, y un puñado de iconos de Font Awesome en el pie de página. Dos de esas tres familias se resuelven contra Google Fonts sin ninguna instalación local, así que el informe de importación probablemente solo marcará la fuente de iconos, si acaso. Cambia el cuerpo de texto por una tipografía de pago y autohospedada de una fundidora, y el panorama cambia por completo. Ahora la importación depende de si tienes esa familia exacta instalada localmente, en un formato que Figma pueda leer.

El grupo autohospedado que activa Inter

Las fuentes autohospedadas son otra historia, y dos detalles técnicos explican casi todo el porqué.

Brecha de formato: Figma lee TTF y OTF, no el WOFF2 que la mayoría de sitios usa

El 65% de las solicitudes de fuentes en la web se entregan como WOFF2, con un 16% en WOFF 1.0 y un 7% en TrueType. Pero la instalación local de fuentes de Figma solo lee archivos TTF y OTF. Un archivo WOFF2 autohospedado, incluso uno con licencia completa, se sustituye al importar a menos que esa misma familia también esté instalada en tu máquina en un formato que Figma pueda ver. Tener el nombre correcto de la fuente no basta. Necesitas el formato de archivo correcto, instalado localmente, antes de que Figma abra la página.

Las fuentes variables pueden sustituir solo un estilo

El 39.4% de las páginas de escritorio y el 41.3% de las páginas móviles ya usan fuentes variables, más que el tercio aproximado de 2024. Las fuentes variables complican el panorama de todo o nada. Si a un archivo variable le falta un solo estilo estático, comúnmente Bold, Figma conserva el archivo estático original para ese estilo y sustituye el resto. El resultado es una sola familia que se importa parcialmente correcta y parcialmente sustituida, lo cual se ve extraño en el informe la primera vez que lo ves.

Dos fallas de sustitución que se ven distintas

No toda sustitución se ve igual una vez que aparece en la página. Cambiar el texto del cuerpo a Inter cambia las formas de las letras pero mantiene las palabras legibles. Cambiar una fuente de iconos no. Font Awesome, que aparece en aproximadamente el 9% de las páginas, asigna caracteres individuales a pictogramas en lugar de letras, así que una sustitución convierte un icono de navegación o el glifo de una red social en la forma equivocada o en un cuadro vacío. ¿Caracteres raros donde antes había iconos? Revisa el informe de sustitución buscando una fuente de iconos antes de asumir que la importación se rompió.

También existe una brecha de plataforma que conviene conocer si trabajas en un equipo de diseño. Los usuarios de ChromeOS y Linux solo pueden usar Google Fonts más SF Pro y SF Compact de Apple dentro de Figma; no pueden instalar fuentes locales arbitrarias como sí pueden los usuarios de Mac y Windows. Una fuente personalizada autohospedada en una página se sustituirá para cada compañero de equipo con ChromeOS o Linux, sin importar lo que esté instalado en la máquina de cualquier otra persona.

Leer el informe de importación para encontrar cada cambio

UnHTML resuelve la fuente de cada nodo de texto contra tus fuentes instaladas y Google Fonts primero, y solo recurre a Inter cuando ninguna de las dos coincide. Cada cambio queda listado en el informe de importación, así que puedes encontrar exactamente qué capas cambiaron sin revisar toda la página a simple vista. La resolución ocurre completamente en tu máquina. Nada del contenido de la página se sube a ningún lado para tomar esa decisión.

Una forma práctica de revisar un informe: busca primero las familias sustituidas, luego decide por familia si vale la pena instalar la fuente real localmente como TTF u OTF y volver a importar, o aceptar Inter porque el diseño es una maqueta rápida en lugar de una reconstrucción exacta pixel por pixel.

Qué significa esto antes de confiar en la tipografía de una importación

Para la mayoría de las páginas, la sustitución de fuentes es la excepción, no la regla. Google Fonts cubre cerca de la mitad de todo el uso de fuentes en la web y casi nunca se sustituye. Las páginas que sí ven cambios se concentran en fuentes personalizadas autohospedadas, desajustes de formato entre WOFF2 y los archivos TTF u OTF que Figma puede instalar, fuentes variables a las que les falta un solo estilo, y fuentes de iconos cuya falla es más visible que un simple cambio de fuente.

Antes de confiar en la tipografía de una página importada, abre el informe. Si falta una familia que esperabas ver, esa es tu señal para instalarla localmente y volver a ejecutar la importación en lugar de adivinar. UnHTML muestra ese informe automáticamente en cada importación, en línea con su propia política de privacidad de resolver todo localmente, lo cual es la forma más rápida de distinguir una importación limpia de una que necesita una segunda pasada.