Muestra pronto el texto alternativo cuando los lectores necesiten las palabras para usar una página. Elige ocultarlo temporalmente solo para un elemento pequeño cuya dependencia de la fuente esté justificada. Si mantienes una página en un Mac, esta guía explica cómo elegir una política y probar su efecto en el flujo del texto.

¿Qué cambia realmente mientras se carga una fuente?

Una fuente alternativa representa el mismo texto con otro tipo de letra mientras la fuente solicitada no está disponible. El texto oculto temporalmente corresponde al periodo de bloqueo de la carga de fuentes: el navegador distribuye el texto usando una fuente alternativa invisible. La cronología de carga comienza cuando el navegador intenta usar por primera vez la fuente descargable. La referencia de MDN sobre font-display explica estas etapas.

Esta distinción importa al revisar una página. Un encabezado en blanco no demuestra que se hayan reservado sus dimensiones finales. Durante el periodo de bloqueo, el navegador sigue usando la disposición de la fuente alternativa; ocultar las letras no determina dónde estarán los saltos de línea de la fuente descargada. Evalúa por separado la visibilidad y la estabilidad de la disposición.

El control pertinente es el descriptor font-display dentro de una regla @font-face. Pertenece a la definición de la fuente, no a un selector de párrafo común. Esta es una decisión de autoría de la página: usa la hoja de estilos o la configuración de fuentes disponible para la página que mantienes. MDN documenta dónde se aplica font-display.

¿Qué valor de font-display se adapta a la tarea del lector?

Antes de editar, decide dos cosas: si las palabras deben aparecer pronto con otra fuente y si es aceptable reemplazarla más adelante. La siguiente tabla traduce los periodos de carga documentados en opciones para una página pública hipotética. Las definiciones de valores de MDN describen el comportamiento subyacente.

Valor Mientras la fuente no está disponible Oportunidad para reemplazar la fuente alternativa Punto de partida adecuado
swap Bloqueo extremadamente breve y luego fuente alternativa visible Periodo de intercambio ilimitado Un encabezado corto en el que importa el tipo de letra previsto
fallback Bloqueo extremadamente breve y luego fuente alternativa visible Periodo de intercambio corto Texto de lectura en el que se acepta un cambio temprano
optional Bloqueo extremadamente breve Sin periodo de intercambio Texto en el que lo más importante es conservar la primera fuente visible
block Fuente alternativa invisible durante un periodo de bloqueo corto y luego visible Periodo de intercambio ilimitado Un elemento pequeño que depende de una fuente específica
auto Política elegida por el navegador Política elegida por el navegador Aceptar el comportamiento predeterminado del navegador

Estas son categorías de políticas, no temporizadores exactos que puedas configurar. El borrador actual de CSS Fonts Level 4 del W3C recomienda duraciones típicas, pero permite explícitamente variaciones entre navegadores. También limita block a fragmentos pequeños de texto cuya fuente específica sea necesaria para la usabilidad. Preferir la apariencia de un encabezado, por sí sola, es una razón débil para dejarlo en blanco. W3C: Controlar la visualización de fuentes por cada Font-Face.

Para una página sintética con un encabezado llamado «Colección de muestra», una navegación llamada «Sección uno» y varios párrafos, empieza por considerar fallback para el texto de lectura. Considera swap para el encabezado corto si es importante que al final se use su tipo de letra. Elige optional cuando tenga prioridad conservar la primera representación visible. Estas recomendaciones aplican las políticas documentadas a la tarea del lector; no son resultados medidos.

Usa una guía para decidir sobre la visibilidad y el reajuste

Evalúa cada tipo de texto por separado. Una etiqueta de navegación y un párrafo pueden usar la misma familia, pero sus restricciones de disposición son distintas. La pregunta útil es si un cambio de fuente impide que alguien continúe con la tarea o si solo cambia la apariencia.

  1. Lee la página con la fuente alternativa. ¿Puede alguien entender «Sección uno», identificar el encabezado y leer los párrafos? Si es así, mostrar la fuente alternativa es un punto de partida viable.
  2. Observa el reemplazo de la fuente. ¿El encabezado ocupa una línea más? ¿Las etiquetas se ajustan? ¿Se desplaza el siguiente párrafo?
  3. Elige un intervalo de reemplazo aceptable. Usa swap cuando siga siendo aceptable un reemplazo tardío, fallback cuando solo sea bienvenido un reemplazo temprano o optional cuando deba conservarse la primera fuente visible.
  4. Exige una razón concreta para dejar el texto en blanco. Antes de elegir block, identifica qué dejaría de ser utilizable con la fuente alternativa y por qué no se puede eliminar esa dependencia.

Por ejemplo, supongamos que «Colección de muestra» ocupa una línea con la fuente alternativa y dos con la fuente descargada. Si el encabezado tiene una altura de línea hipotética de 40 píxeles, la línea adicional suma 40 píxeles a su altura, suponiendo que el espaciado no cambia. El contenido que aparece debajo podría desplazarse en consecuencia. Son valores ilustrativos, no mediciones del navegador.

Ocultar el texto temporalmente no resuelve esa discrepancia. Las opciones prácticas son mejorar la coincidencia de la fuente alternativa, ajustar la disposición después de probarla o seleccionar una política que evite un reemplazo tardío. Según el comportamiento de optional del borrador actual del W3C, una vez que se ha dibujado el texto alternativo, la fuente opcional no debe reemplazarlo durante la vida útil de esa página. La definición de optional del W3C.

Cómo aplicar y probar la opción en un Mac

Usa una página cuya hoja de estilos puedas editar y cuya fuente web existente ya se cargue correctamente. Conserva la referencia al archivo de fuente que ya usa; no hace falta descargar una fuente nueva ni usar un recurso sustituto para esta comparación.

Busca la declaración @font-face pertinente en la hoja de estilos de origen de la página o en la configuración de fuentes compatible. Establece el descriptor font-display en el valor candidato, por ejemplo, font-display: fallback;. Revisa las demás declaraciones usadas para pesos y estilos, para que la prueba abarque las fuentes que la página solicita realmente. El ejemplo de font-display de MDN muestra dónde va el descriptor.

En Chrome en tu Mac, pulsa Command + Option + I para abrir DevTools. También puedes hacer clic derecho en el texto que quieras y elegir Inspeccionar; el panel Elements muestra el CSS aplicado en Styles. Las instrucciones de Chrome para abrir DevTools documentan ambas opciones.

Haz la siguiente comparación después de cada cambio en la hoja de estilos. Mantén constantes el ancho de la ventana y el nivel de zoom para poder atribuir las diferencias a la política de carga de fuentes.

  1. Abre Network, activa Disable cache, selecciona un ajuste más lento en el menú Throttling y vuelve a cargar la página. Usa el filtro Font para centrarte en las solicitudes de fuentes.
  2. Observa el encabezado, la navegación y el inicio del párrafo. Registra si el texto aparece en blanco, aparece con la fuente alternativa y luego cambia los saltos de línea.
  3. Si la transición es demasiado rápida para inspeccionarla, activa Capture screenshots en la configuración del panel Network y vuelve a cargar la página para inspeccionar la secuencia de carga.
  4. Desactiva la limitación de velocidad y desmarca Disable cache. Vuelve a cargar la página para comparar una visita posterior en condiciones normales. La referencia de Chrome sobre las funciones de Network documenta estos controles.

Prueba por separado el resultado cuando la fuente no está disponible. En Network, haz clic derecho en la solicitud de la fuente y selecciona Block request; luego vuelve a cargar la página. Chrome muestra el patrón correspondiente en Request conditions. Comprueba que las palabras sean legibles y que la página siga siendo utilizable con la fuente alternativa. Después, elimina o desactiva el patrón de prueba. La documentación de Chrome sobre las condiciones de las solicitudes explica cómo bloquear solicitudes e identificar las que se bloquearon.

Repite la revisión de la página en Safari si forma parte del entorno de navegación previsto para Mac. Toma la prueba en Chrome como evidencia de la representación de ese navegador, no como prueba de que la sincronización sea idéntica en otros navegadores: la especificación permite diferencias entre ellos. Anota brevemente el navegador, el valor candidato, la visibilidad inicial y los ajustes de línea observados.

¿Qué ocurre si la fuente alternativa visible cambia demasiado la disposición?

Empieza con el texto real y el ancho disponible. Compara etiquetas cortas, el encabezado más largo y varias líneas de párrafo. Una fuente alternativa que se parezca visualmente a la fuente web puede tener avances de caracteres distintos y generar saltos de línea diferentes.

Para lograr una coincidencia más cercana, size-adjust escala los contornos y las métricas de los glifos de una fuente, incluidos sus avances. MDN muestra cómo definir una fuente alternativa local y ajustarla para que se parezca más a una fuente web principal. Determina el porcentaje adecuado para tu par de fuentes; el porcentaje de un ejemplo de documentación no es un ajuste universal. MDN: size-adjust.

Las métricas verticales requieren una comprobación por separado. El descriptor ascent-override controla la métrica situada por encima de la línea base que se usa al disponer los cuadros de línea, pero MDN indica actualmente que su disponibilidad es limitada. Trata ese ajuste como una mejora y conserva una disposición legible con la fuente alternativa en los navegadores que no lo admitan. MDN: ascent-override.

Deja que el navegador se encargue de la composición tipográfica. No intentes estabilizar un encabezado reemplazando o midiendo cada carácter por separado. La búsqueda de fuentes de CSS incluye un tratamiento especial para grupos de grafemas, como un carácter base con un signo diacrítico combinado. Inspecciona las etiquetas y líneas completas en su disposición real. W3C: Coincidencia de grupos.

¿El precargado o una biblioteca de carga de fuentes cambian la decisión?

La precarga ayuda a descubrir recursos. El estándar HTML de WHATWG define preload como la obtención anticipada y el almacenamiento en caché de un recurso que se espera usar en la navegación actual. No selecciona tu política de font-display. Considérala solo después de decidir qué comportamiento visible es aceptable; obtener la fuente antes no sustituye la decisión sobre qué ocurre cuando sigue sin estar disponible. WHATWG: Tipo de enlace preload.

Para el texto habitual de una página, empieza con CSS. Si un proyecto existente usa Font Face Observer, su método documentado load() devuelve una promesa que se resuelve cuando se carga la fuente y se rechaza si falla. El nombre de la familia y las descripciones opcionales de peso, estilo y anchura deben coincidir con la fuente solicitada. La biblioteca también documenta cómo proporcionar texto de prueba adecuado cuando la fuente no incluye los caracteres predeterminados. Documentación de Font Face Observer.

Una notificación de éxito de la biblioteca indica que se cargó la fuente; la aplicación sigue determinando qué se hace visible. Si una lógica personalizada oculta el texto, especifica una ruta de error que restaure una fuente alternativa legible. De lo contrario, un error de carga puede dejar activa la regla que oculta el texto. Esta recomendación de implementación se deriva de las rutas documentadas de éxito y error de la biblioteca.

La API nativa tiene un límite similar. document.fonts.ready se resuelve cuando terminan las operaciones de carga y disposición de las fuentes utilizadas; ese conjunto puede diferir de todas las fuentes declaradas, incluidas las fuentes opcionales que dejaron pasar su oportunidad. Por lo tanto, no demuestra que todas las fuentes previstas estén visibles. MDN: Propiedad fonts de Document.

Del mismo modo, el argumento de texto opcional de document.fonts.load() selecciona fuentes coincidentes mediante sus rangos Unicode; no comprueba la cobertura de glifos individuales. La finalización de la carga y la representación correcta de la muestra completa siguen siendo comprobaciones distintas. MDN: Método load() de FontFaceSet.

Elige la política revisando versiones de la misma página con carga lenta, sin disponibilidad de la fuente y con cargas posteriores. Mantén legibles las palabras comunes, decide explícitamente si es aceptable un reemplazo tardío y acepta ocultar el texto temporalmente solo cuando un elemento pequeño tenga una dependencia demostrada de una fuente. El resultado debería permitir que alguien siga leyendo «Colección de muestra» cómodamente en cada condición probada.

Fuentes