Una fuente descargada puede quedar sin usar porque CSS selecciona otra variante, el texto queda fuera de sus caracteres compatibles o ya pasó su periodo de visualización. En un Mac, empieza por inspeccionar la fuente que realmente renderiza una etiqueta y luego sigue el proceso hacia atrás, desde la selección hasta la carga.

Esta guía está dirigida a quien mantiene una página web y ve que la solicitud de una fuente se completó correctamente, pero el texto sigue mostrándose con la fuente de reserva. Usa Chrome en macOS para los pasos de inspección. La etiqueta de ejemplo Panel 204 y el nombre de familia Sample Sans ilustran el diagnóstico; no describen ningún sitio web en particular.

¿Qué demuestra realmente una descarga correcta?

Aborda el diagnóstico como cuatro preguntas independientes: ¿Se obtuvo el recurso? ¿Se registró una variante utilizable? ¿CSS seleccionó esa variante para estos caracteres? ¿El motor de renderizado la dibujó? Una precarga de fuentes inicia una solicitud anticipada; su presencia no determina qué fuente proporciona el texto visible. MDN: rel="preload"

La correspondencia de fuentes se aplica al texto, no simplemente a los archivos descargados. El navegador tiene en cuenta las familias y propiedades solicitadas y, después, comprueba la compatibilidad con los caracteres. Por eso, una etiqueta puede usar varias fuentes y otra parte de la página puede provocar la descarga de una fuente sin aportar mucha información sobre la etiqueta que estás examinando. W3C: CSS Fonts Module Level 4, font matching

Usa esta tabla de decisiones para elegir la siguiente comprobación. Es una ayuda de diagnóstico basada en los límites documentados de carga y correspondencia, no un registro de resultados medidos en navegadores.

Observación Siguiente comprobación Qué ayuda a distinguir
La familia calculada difiere de la familia prevista Sigue la declaración CSS ganadora Problema de cascada o de selección del elemento
La familia calculada es correcta, pero la fuente renderizada difiere Inspecciona los descriptores de la variante y la cobertura de caracteres Problema de selección o de fuente de reserva
JavaScript indica que una variante se cargó, pero no aparece en el conjunto de fuentes del documento Inspecciona el código de registro Carga sin registro
La fuente aparece después de recargar, pero no en la primera visita Inspecciona font-display y el momento de carga Comportamiento del periodo de visualización
El texto normal funciona, pero el texto de canvas no cambia Inspecciona el orden de dibujo y la configuración de fuentes de canvas Operación de dibujo independiente

¿Qué fuente está dibujando realmente la etiqueta?

En la página afectada, pulsa Command + Shift + C y selecciona el texto. En Elements, selecciona el elemento más pequeño que contenga la etiqueta afectada. Abre Computed y desplázate hasta Rendered Fonts. Chrome documenta esta vista como el lugar donde inspeccionar las fuentes que proporcionan el texto renderizado. Chrome DevTools: CSS features reference, Chrome DevTools: Apply other effects

Anota la variante renderizada e indica si su origen es local o un recurso de red. Anota también los valores calculados de font-family, font-weight y font-style. La familia calculada es la pila solicitada; el resultado de fuentes renderizadas identifica cuál proporcionó los glifos. Que la apariencia resulte familiar es una prueba débil, porque dos variantes pueden parecerse. Chrome DevTools: What font is that?

Si la variante prevista aparece para el texto afectado, centra la investigación en la diferencia concreta de apariencia, como el peso o las características tipográficas. Si no aparece, continúa con los pasos siguientes. Mantén el texto original y la ventana gráfica sin cambios durante las pruebas para que cada observación se pueda comparar.

¿El CSS efectivo solicita la variante prevista?

En Computed, inspecciona las propiedades tipográficas efectivas y, después, usa Styles para encontrar sus declaraciones. Chrome distingue estas vistas: Styles incluye las declaraciones sobrescritas, mientras que Computed muestra los valores realmente aplicados. Si una tarjeta contiene varias etiquetas, inspecciona el elemento hijo que contiene el texto; la declaración tipográfica del elemento padre no basta para sacar conclusiones sobre el hijo. Chrome DevTools: CSS features reference

Comprueba cualquier abreviatura font ganadora, así como las propiedades individuales. Por ejemplo, font: 16px sans-serif selecciona una familia genérica y restablece los componentes omitidos de la abreviatura, incluidos el peso y el estilo. También restablece propiedades como font-feature-settings y font-variation-settings. Corrige la declaración responsable del valor inesperado y vuelve a inspeccionar. MDN: font

A continuación, compara la familia solicitada con el descriptor font-family de la regla @font-face correspondiente. Ese descriptor define el nombre de familia CSS que se usa para hacer referencia a la variante; el nombre del archivo no es el que debes poner en la pila de fuentes del elemento. Comprueba la regla que recibe el navegador, incluidos src, el peso, el estilo y cualquier rango declarado. MDN: @font-face

El rango de pesos admitido por una fuente variable puede expresarse con dos valores, mientras que una variante estática puede declarar un solo peso. Asegúrate de que esos descriptores representen con precisión el recurso proporcionado. Una discrepancia merece investigarse, pero no explica automáticamente el uso de la fuente de reserva: la correspondencia de fuentes contempla alternativas cuando no está disponible un estilo exacto. MDN: @font-face, W3C: Matching font styles

¿Puede una fuente local estar teniendo prioridad?

Inspecciona src para ver si tiene una alternativa local(). En un Mac con esa fuente instalada, el navegador puede usar la copia local mientras deja sin usar una fuente web precargada por separado. Para aislar esta condición en Chrome, abre el panel Rendering, activa Disable local fonts y recarga la página. Compara Rendered Fonts antes y después y, luego, restablece la configuración. Esta prueba se centra en las fuentes local() de las reglas @font-face. Chrome DevTools: Apply other effects

¿Se cargó y registró la variante en el documento correcto?

Una variante creada con new FontFace() puede terminar de cargarse antes de añadirse a un conjunto de fuentes. Para el renderizado del documento, hay que añadirla a document.fonts. Inspecciona el proceso de carga de la aplicación para comprobar que se realizan ambas operaciones; que se resuelva la promesa de carga de la variante no completa por sí solo el registro. MDN: CSS Font Loading API

El siguiente diagnóstico completo para la consola enumera las variantes registradas en el documento actual. Ejecútalo en el contexto de la consola de la página afectada. Lee el conjunto sin iniciar cargas ni cambiar estilos; no identifica los glifos renderizados. Aquí no se ha ejecutado su comportamiento, que depende del navegador.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Usa el inventario para distinguir entre una variante sin registrar y otra registrada que sigue sin usarse. Si una entrada tiene el estado error, investiga el error de carga antes de ajustar la tipografía. Una entrada loaded confirma el estado de carga, pero la selección de la variante sigue dependiendo del elemento y del texto. MDN: CSS Font Loading API

No consideres que document.fonts.check() demuestre que la fuente se haya renderizado. Puede devolver true incluso para una familia inexistente. Su argumento de texto opcional limita la correspondencia según los rangos Unicode declarados, pero no comprueba la cobertura de glifos individuales. Del mismo modo, document.fonts.ready se resuelve después de cargar y maquetar las fuentes usadas; no certifica que se haya renderizado cada variante declarada. MDN: FontFaceSet.check(), MDN: Document.fonts

¿La fuente cubre los caracteres que estás probando?

Comprueba tanto unicode-range en CSS como el recurso de fuente real. El descriptor controla qué caracteres pueden usar una variante. Ampliar el descriptor no puede crear glifos que falten en el archivo: el mapa de caracteres de la fuente sigue siendo parte de la correspondencia. MDN: unicode-range, W3C: Matching font styles

Considera una regla ilustrativa limitada a U+0030-0039. En Panel 204, solo 2, 0 y 4 están dentro de ese rango. Las letras y el espacio quedan fuera. Por tanto, que los dígitos provoquen una descarga no demuestra que la fuente pueda renderizar la etiqueta completa. MDN documenta que encontrar un carácter apto puede provocar la descarga del recurso de fuente completo. MDN: unicode-range

Este ejemplo de JavaScript independiente muestra esa diferencia. Se ejecuta en la consola de un navegador o en Node.js sin configuración previa. El cálculo determinista del rango se ejecutó para la muestra que aparece aquí.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Si el rango excluye caracteres necesarios, corrige un descriptor inexacto o proporciona un subconjunto que los incluya. Conserva el texto original que falla al comprobar el resultado. No des por sentado que iterar sobre una cadena equivale a probar la composición tipográfica: las secuencias combinadas requieren tratar los clústeres, y el estándar considera la información de composición tipográfica cuando es necesario. Mantén las secuencias intactas al comparar el resultado renderizado. W3C: Font matching and cluster matching

¿Se agotó el periodo de visualización de la fuente?

Inspecciona font-display cuando la familia y la cobertura parezcan correctas. optional tiene un periodo de bloqueo extremadamente corto y no tiene periodo de intercambio. fallback tiene un periodo de intercambio corto. Por tanto, si un recurso llega después del periodo aplicable, el texto de reserva puede seguir visible durante esa carga de página. swap permite un periodo de intercambio ilimitado tras su periodo de bloqueo inicial. MDN: font-display

Para un diagnóstico controlado, cambia temporalmente la regla afectada a font-display: swap en la hoja de estilos servida y repite las condiciones de la carga inicial. Si la variante aparece después de cargarse, el momento de llegada es una explicación respaldada. Antes de conservar este ajuste, decide si ese cambio visual posterior resulta adecuado para la página. Repite una carga inicial y otra desde la caché; el resultado de la caché por sí solo no reproduce el momento de llegada original.

¿Qué cambia cuando una biblioteca o canvas dibuja el texto?

Si la página ya usa Font Face Observer, inspecciona la familia observada y sus opciones weight, style y stretch. Su documentación lo describe como un cargador y monitor, exige las reglas @font-face habituales y requiere una cadena de prueba personalizada cuando a la fuente le faltan los caracteres de prueba predeterminados. El tiempo de espera predeterminado es de tres segundos. El tiempo de espera de un observador y el periodo font-display del navegador son condiciones independientes. Font Face Observer documentation

Como inferencia diagnóstica, después de un mensaje de éxito del observador hay que inspeccionar el elemento objetivo. Supervisar la disponibilidad de una variante no demuestra que el CSS ganador del elemento la solicite. Instalar otro cargador aporta poco cuando la pregunta pendiente es qué variante se renderizó.

Canvas introduce un límite de dibujo independiente. El contexto de dibujo tiene su propia configuración font, cuyo valor inicial es 10px sans-serif; las asignaciones no válidas se ignoran. Por eso, establecer una familia CSS en el elemento canvas no basta para determinar la fuente del contexto. Inspecciona el valor asignado al contexto de dibujo y el orden de las operaciones de carga y dibujo. WHATWG: Canvas text styles

Para dibujar texto en canvas, espera a que se cargue la variante registrada prevista, establece la fuente del contexto y, luego, vuelve a dibujar la escena afectada con la rutina de dibujo habitual de la aplicación. Los píxeles ya dibujados no adoptan una tipografía nueva cuando llega una fuente. La preparación del texto en canvas también usa un cuadro de línea hipotético de ancho infinito, por lo que una prueba correcta en canvas no demuestra que una etiqueta web con ancho limitado se ajuste a las líneas de la misma manera. WHATWG: Text preparation and drawing text

¿Cómo confirmas la reparación?

Vuelve a la etiqueta original y repite la observación que reveló el problema. Verifica la solicitud calculada, la variante renderizada y los caracteres relevantes bajo las condiciones de carga originales. Si usas canvas, vuelve a dibujar antes de comparar. Lleva un registro breve del elemento, las propiedades solicitadas, la variante realmente renderizada, el recurso y el cambio que dio resultado; así el diagnóstico será reproducible.

Da por terminada la tarea cuando puedas explicar por qué no se usaba la fuente y mostrar el resultado previsto en el texto afectado. Corregir la declaración de familia, proporcionar un subconjunto adecuado, registrar la variante, elegir una política de visualización apropiada o volver a dibujar en el momento adecuado son medidas que resuelven problemas distintos. Elige la solución respaldada por tus observaciones.

Fuentes