El CLS (Cumulative Layout Shift) es uno de los factores del Core Web Vitals. Este se produce cuando los elementos cambian de posición en la página mientras se carga, lo que puede ser molesto para los usuarios y afectar negativamente la experiencia de usuario. Una de las causas comunes del CLS es el retraso en la carga de fuentes personalizadas.
Para evitar el CLS, se puede utilizar la propiedad “font-display” en CSS, y establecerla en “block”. Esto hace que se reserve un espacio para el texto de la fuente, aunque esta aún no se haya cargado completamente, evitando que el contenido se mueva cuando la fuente finalmente se carga.
Por ejemplo, si se desea utilizar la fuente “Roboto” con la propiedad “font-display: block;”, se puede agregar el siguiente código en el archivo CSS correspondiente:
@font-face {
font-family: 'Roboto';
font-display: block;
src: url('path/to/roboto.woff2') format('woff2'),
url('path/to/roboto.woff') format('woff');
}
Es importante destacar que la propiedad “font-display” no siempre es compatible con todos los navegadores. En caso de que el navegador no lo admita, la fuente se cargará de manera predeterminada y se producirá un CLS. Por lo tanto, es importante tener en cuenta esta limitación al utilizar esta técnica.