Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Cómo falla la auditoría de visualización para fuentes de Lighthouse
  • Cómo evitar que se muestre el texto invisible
    • Precargar fuentes web
    • Fuentes de Google
  • Compatibilidad con el navegador
  • Indicaciones específicas para cada categoría
    • Drupal
    • Magento
  • Recursos

Asegúrese de que el texto permanece visible mientras carga la fuente web

May 2, 2019 — Actualizado Apr 29, 2020
Available in: 한국어, Português, Русский, English
Appears in: Auditorías de rendimiento
En esta página
  • Cómo falla la auditoría de visualización para fuentes de Lighthouse
  • Cómo evitar que se muestre el texto invisible
    • Precargar fuentes web
    • Fuentes de Google
  • Compatibilidad con el navegador
  • Indicaciones específicas para cada categoría
    • Drupal
    • Magento
  • Recursos

Con frecuencia, las fuentes son archivos grandes que tardan en cargarse. En algunos navegadores se oculta el texto hasta que se carga la fuente, lo que provoca un destello de texto invisible (FOIT).

Cómo falla la auditoría de visualización para fuentes de Lighthouse #

Lighthouse etiqueta cualquier fuente de una URL donde pueda destellar texto invisible:

Una captura de pantalla de Lighthouse. Asegúrese de que el texto permanece visible durante la auditoría de cargas para fuentes web
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Cómo evitar que se muestre el texto invisible #

El modo más sencillo de evitar que se visualice el texto invisible mientras se cargan las fuentes personalizadas es mostrar temporalmente una fuente del sistema. Incluyendo font-display: swap en el estilo de @font-face, puede evitar el FOIT en la mayoría de los navegadores modernos:

@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}

En la API de visualización de las fuentes se especifica cómo se muestra una fuente. swap permite que el navegador muestre inmediatamente el texto que utiliza la fuente con una fuente del sistema. Una vez que la fuente personalizada está lista, reemplaza a la fuente del sistema. (Consulte la publicación Evitar el texto invisible durante la carga para obtener más información).

Precargar fuentes web #

Utilice <link rel="preload" as="font"> para recuperar los archivos de sus fuentes con antelación. Obtenga más información:

  • Precargue fuentes web para mejorar la velocidad de carga (codelab)
  • Evite el cambio de diseño y los destellos de texto invisible (FOIT) mediante la precarga de fuentes opcionales

Fuentes de Google #

Agregue el parámetro &display=swap al final de la URL de Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Compatibilidad con el navegador #

Es importante mencionar que no todos los navegadores principales son compatibles con font-display: swap, por lo que es posible que necesite trabajar un poco más para solucionar el problema del texto invisible.

Pruebelo

Revise el codelab para evitar el destello del texto invisible con el fin de conocer cómo evitar el FOIT en todos los navegadores.

Indicaciones específicas para cada categoría #

Drupal #

Especifique @font-display cuando defina fuentes personalizadas en su tema.

Magento #

Especifique @font-display al definir fuentes personalizadas .

Recursos #

  • Código fuente para Asegurar que el texto permanezca visible durante la auditoría de carga para fuentes web
  • Evitar el texto invisible durante la carga
  • Controlar el rendimiento de las fuentes con visualizadores para fuentes
  • Precargar fuentes web para mejorar la velocidad de carga (codelab)
  • Evitar el cambio de diseño y los destellos de texto invisible (FOIT) mediante la precarga de fuentes opcionales
Última actualización: Apr 29, 2020 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • 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.