Ensure text remains visible during webfont load. texto permanezca visible durante la carga de la fuente web

Ensure Text Remains Visible During Webfont Load

Ensure text remains visible during webfont load

Asegúrese que el texto permanezca visible durante la carga de la fuente web

Los navegadores son programas cuidadosamente diseñados y hacen muchas cosas bajo el capó que tal vez no sospechemos. La carga de fuentes no es una excepción a esta regla. Cuando un navegador solicita un recurso de fuente de un servidor web, cualquier elemento con estilos que invoquen esa fuente se oculta hasta que se descargue el recurso de fuente. Esto se conoce como “Destello de texto invisible” o FOIT.  En esta publicación explicaré cómo puede asegurarse que el texto permanezca visible durante la carga de la fuente web o Ensure text remains visible during webfont load.

Una de los inconvenientes del uso de fuentes web es que si una fuente no se encuentra en el dispositivo del usuario, debe descargarse. Esto significa que antes de que la fuente esté disponible, el navegador debe decidir cómo manejar la visualización de cualquier bloque de texto que use esa fuente. Y debe hacerlo de una manera que no afecte significativamente la experiencia del usuario y el rendimiento percibido.

Este comportamiento está ahí para «salvarnos» de ver el texto inicialmente renderizado en una fuente del sistema, solo para cambiar al tipo de letra personalizado una vez que se haya cargado. Ese comportamiento se conoce como Flash of Unstyled Text, o FOUT.

FOIT puede sonar preferible a FOUT, pero FOIT tiene repercusiones para los usuarios en conexiones lentas. De forma predeterminada, la mayoría de los navegadores ocultarán el texto hasta por 3 segundos hasta que muestren el texto en un tipo de letra del sistema de respaldo mientras esperan que se cargue una fuente. Otros navegadores como Safari esperarán incluso más tiempo, o tal vez indefinidamente, dejando a algunos usuarios en una estacada con texto invisible que puede fallar en la representación si una solicitud de fuente se detiene.

Cómo evitar mostrar texto invisible

Según web.dev asegurarse que el texto permanezca visible durante la carga de la fuente web, es mostrar temporalmente una fuente del sistema.

El núcleo de font-display es la línea de tiempo de visualización de la fuente que se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente determinada descargada. La línea de tiempo se divide en los tres períodos siguientes que dictan el comportamiento de representación de cualquier elemento que utilice la fuente.

Período de bloque de fuente

Si el tipo de fuente no está cargado, cualquier elemento  que intente utilizarlo debe representar un tipo de fuente de reserva invisible . Si la fuente se carga correctamente durante este período, se utiliza normalmente.

Período de intercambio de fuentes

Si la fuente de la fuente no está cargada, cualquier elemento que intente utilizarla debe representar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.

Período de falla de fuente

Si la fuente de la fuente no está cargada, el agente de usuario la trata como una carga fallida que causa un retroceso normal de la fuente.

El descriptor font-display en CSS está disponible en Chrome y emerge en Firefox y Safari (pero es posible que desee verificar la compatibilidad del navegador usted mismo, ya que las cosas cambian todo el tiempo).

compatibilidad de font-display-CSS en navegadoresfont-display es descriptor de visualización de fuentes de CSS disponible a partir de Chrome 61, Chrome para Android, Opera y la vista previa técnica de Safari. font-display determina cómo se muestra una fuente en función de si está descargada y lista para usar y cuándo. El soporte para esta propiedad está entrando en Firefox 58. Con font-display, podemos controlar cómo se renderizan las fuentes.

Valores que puede tomar font-display

auto

El agente de usuario define la estrategia de visualización de fuentes.

block

Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito

swap

No establece tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.

fallback

Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto

optional

Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.

El valor swap de font-display realmente debe establecerse dentro del bloque @font-face de CSS.

swap: El texto alternativo se procesa inmediatamente en el siguiente tipo de letra del sistema disponible en la pila de fuentes hasta que se carga la fuente personalizada, en cuyo caso se incluirá el nuevo tipo de letra swap. Esto es lo que queremos para cosas como el texto del cuerpo, donde queremos que los usuarios estén capaz de leer contenido inmediatamente.

Solución para asegurarse que el texto permanezca visible durante la carga de la fuente web.

Entonces, una solución a este problema consiste en que podemos insertar un pequeño trozo de código en el head del documento:

@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/niconne/v10/w8gaH2QvRug1_rTfnQyn3A.ttf) format('ttf');
font-display: swap;
}

En este fragmento, estoy definiendo un valor swap de la fuente Pacifico. La solución de usar el valor swap de font-display dentro de @font-face

o

@font-face { font-family:"Open Sans Regular";font-weight:400;font-style: normal;src:url("fonts/OpenSans-Regular-BasicLatin.woff2")format("woff2");font-display: swap;}

Cómo font-display no es una propiedad de CSS sino un descriptor de visualización de fuentes para @font-face, debe usarse dentro de un  @font-face regla

Para incluir CSS dentro del mismo documento, utilizaremos la etiqueta <style>. La colocaremos en la cabecera del documento. Entre esta etiqueta y su cierre (</style>) escribiremos todos los estilos que queramos definir en el documento.

En WordPress, usando el plugin Header and Footers Scripts, podemos incluir el código en la cabecera (header).

Por lo tanto, debe asegúrese  que el texto permanezca visible durante la carga de la fuente web. Si no conoce el tecnicismo de arreglarlo, haré esto por ti. ¡Ponte en contacto conmigo ahora!.

Espero tus comentarios, si esta solución ha funcionado para ti, házmelo saber.

 

Contenido Relacionado:

 

Eliminar CSS Y JavaScript No Usados En WordPress
Mejorar Las Métricas Web Principales
Cómo Crear Un Sistema De Notificaciones Push En WordPress
Acelerador PHP Para WordPress
¿Qué es CSS crítico?
Eliminar CSS Innecesario
Speed Index. Indice De Velocidad De página.
Cómo Optimizar La Velocidad De Carga Con Lighthouse
Precargue Los Activos Críticos Para Mejorar La Carga
Que es el Rendimiento Web
Herramientas CSS no utilizadas. Análisis
LiteSpeed ​​caché Para WordPress. Cómo Instalarlo y Configurarlo
Pautas Para Sitios Web Más Rápidos
Como las Páginas en Cache Optimizan el Rendimiento del Sitio
Largest Contentful Paint
Cumulative Layout Shift
Core Web Vitals. Cómo Medir Estas Señales De Calidad
First Input Delay. Primer Retardo De Entrada

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

promedio de puntuación

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Sigueme
Últimas entradas de Estela Silva H. (ver todo)

Soporte a su negocio en el campo del posicionamiento web, optimización web y auditorías profesionales. Gracias a mis acciones, los sitios web obtienen un tráfico segmentado que se traduce directamente en ventas y conversiones en el sitio web con  efectos seguros durante muchos años.

Servicios de Comercio electrónico Servicios de e-Marketing y Estrategías
Montar una tienda Posicionamiento en Goole
Posicionamiento de tiendas Marketing de contenidos
Notificaciones push Auditorías de Contenido
Auditorías SEO
Páginas Web Gratis
Gestión de Google Ads
Asesoramiento y Consulta
Reparación de Sanciones de Google
Entrenamiento SEO
Reparación de Sitio Hackeado
Acelerar WordPress