Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • ¿Por qué debería preocuparte?
  • Mostrar el texto inmediatamente
  • Opción n. 1: Usar font-display
  • Opción n. 2: Espere para usar fuentes personalizadas hasta que se carguen
  • Verificar

Evite el texto invisible durante la carga de fuentes

Nov 5, 2018
Available in: English, Português, Русский, 中文, 日本語 y 한국어
Appears in: Tiempos de carga rápidos
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
En esta página
  • ¿Por qué debería preocuparte?
  • Mostrar el texto inmediatamente
  • Opción n. 1: Usar font-display
  • Opción n. 2: Espere para usar fuentes personalizadas hasta que se carguen
  • Verificar

¿Por qué debería preocuparte? #

Las fuentes suelen ser archivos de gran tamaño que tardan un poco en cargarse. Para hacer frente a esto, algunos navegadores ocultan el texto hasta que se carga la fuente (el "destello de texto invisible"). Si está optimizando el rendimiento, querrá evitar el "destello de texto invisible" y mostrar el contenido a los usuarios inmediatamente usando una fuente del sistema (el "destello de texto sin estilo").

Mostrar el texto inmediatamente #

Esta guía describe dos formas de conseguir esto: el primer enfoque es muy simple pero no tiene support (soporte) universal de navegadores; el segundo enfoque es más trabajoso, pero tiene compatibilidad total con los navegadores. La mejor opción para usted es la que realmente implementará y mantendrá.

Opción n. 1: Usar font-display #

AntesDespués
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; <strong>font-display: swap;</strong> }

font-display es una API para especificar la estrategia de visualización de fuentes. swap le dice al navegador que el texto que usa esta fuente debe mostrarse inmediatamente usando una fuente del sistema. Una vez que la fuente personalizada está lista, la fuente del sistema se cambia.

Si un navegador no admite font-display, el navegador continúa con su comportamiento predeterminado para cargar fuentes. Compruebe qué navegadores admiten font-display aquí.

Estos son los comportamientos predeterminados de carga de fuentes para navegadores comunes:

NavegadorComportamiento predeterminado si la fuente no está lista...
EdgeUtiliza una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.
ChromeOculta el texto hasta por 3 segundos. Si el texto aún no está listo, use una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.
FirefoxOculta el texto hasta por 3 segundos. Si el texto aún no está listo, use una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.
SafariOculta el texto hasta que la fuente esté lista.

Opción n. 2: Espere para usar fuentes personalizadas hasta que se carguen #

Con un poco más de trabajo, se puede implementar el mismo comportamiento para que funcione en todos los navegadores.

Este enfoque consta de tres partes:

  • No utilice una fuente personalizada en la carga de la página inicial. Esto asegura que el navegador muestre el texto inmediatamente usando una fuente del sistema.
  • Detecta cuando se carga su fuente personalizada. Esto se puede lograr con un par de líneas de código JavaScript, gracias a la biblioteca FontFaceObserver.
  • Actualice el estilo de la página para usar la fuente personalizada.

Estos son los cambios que puede esperar realizar para implementar esto:

  • Refactorice su CSS para no usar una fuente personalizada durante la carga inicial de la página.
  • Agrega una secuencia de comandos a tu página. Este script detecta cuándo se carga la fuente personalizada y luego actualizará el estilo de la página.

Pruebelo

Utilice Font Face Observer para mostrar el texto inmediatamente.

Verificar #

Ejecute Lighthouse para verificar que el sitio esté usando font-display: swap para mostrar texto:

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  2. Click the Lighthouse tab.
  3. Make sure the Performance checkbox is selected in the Categories list.
  4. Click the Generate report button.

Confirme que la auditoría Ensure text remains visible during webfont load (Asegúrate de que el texto permanece visible mientras se carga la fuente web) está pasando.

Rendimiento
Última actualización: Nov 5, 2018 — Mejorar el artículo
Codelabs

See it in action

Learn more and put this guide into action.

  • Avoid flash of invisible text
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.