No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

Cómo garantizar que el texto permanezca visible durante la carga de fuentes web Astra

Al analizar el sitio web con PageSpeed Insight, es posible que de vez en cuando se encuentre con este error que dice "Ensure text remains visinle during web font load". En este documento, vamos a explicar cómo solucionar este error durante el uso del tema Astra.

¿Por qué se produce este error?

Cuando un navegador detecta que un texto tiene aplicada una fuente personalizada, espera a que ésta se descargue. El texto permanecerá invisible hasta entonces. La fuente personalizada se utiliza inmediatamente después de que haya terminado de descargarse. Esto normalmente no ocurre si se utilizan las fuentes predeterminadas; sin embargo, ocurre sobre todo cuando se utiliza una fuente personalizada o se utiliza un plugin para insertar las fuentes personalizadas.

Cuando se comprueba la velocidad del sitio web, esta reacción del navegador es la responsable de mostrar el error "Asegúrese de que el texto permanece visible durante la carga de la fuente web".

¿Cómo rectificar este error?

Para rectificar este error, tendrá que asegurarse de que durante el tiempo que el navegador carga su fuente personalizada, debería mostrar las fuentes por defecto. Una vez que el navegador descargue las fuentes personalizadas, deberá cambiar las fuentes predeterminadas por las personalizadas.

Fuentes Google

Para las fuentes de Google, puede utilizar el plugin "Swap Google Fonts Display", que puede descargarse de aquí. Una vez descargado e instalado el plugin, buscará automáticamente cualquier script de Google Fonts y añadirá display=swap a la URL. Esto garantizará que el navegador cargue las fuentes deafult durante el tiempo en que se descarguen las fuentes personalizadas.

ast-swap-google-fonts

Otras fuentes

Cuando se utiliza un plugin para insertar fuentes personalizadas en su sitio web, tendrá que ponerse en contacto con los creadores del plugin o puede editar el código del plugin. He aquí un ejemplo de cómo editar el código del plugin. En este ejemplo, estamos utilizando un plugin desarrollado por nosotros llamado "Custom Font".

Paso 1: En el panel de control de WordPress, vaya a Plugins y seleccione Editor de archivos de plugins

Astra Plugin Editor

Segundo paso: Seleccione el plugin responsable de inyectar fuentes personalizadas en su sitio web.

Paso 3: Localice el archivo .css dentro del código del plugin. En nuestro caso el archivo CSS se encuentra dentro de assets>CSS>bsf-custom-font.css. Tenga en cuenta que cada plugin tendrá diferentes rutas para el archivo CSS. Por favor, póngase en contacto con los creadores del plugin, si no está seguro de dónde encontrar el archivo css de la fuente personalizada.

Paso 4: Copie y pegue el código que aparece a continuación en la parte inferior del archivo .css y haga clic en el botón Actualizar archivo.

@font-face{
	font-family: cambodian
	font-display: swap;
}

Una vez seguidos los pasos, el error "Ensure text remains visinle during web font load" estará solucionado.

¿Le ha resultado útil este artículo?
¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

Documentos relacionados

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio
Ahora elija la opción que prefiera
page builder addon
Elija su complemento de creación de páginas preferido

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form