Utiliza la característica de css font display

Inicio » Utiliza la característica de css font display

Intercambio de fuentes vs. retroceso

Las fuentes web suelen ser terribles para el rendimiento de la web y ninguna de las estrategias de carga de fuentes es especialmente eficaz para solucionar este problema. Las próximas opciones de fuentes podrían finalmente cumplir la promesa de facilitar la alineación de las fuentes de reserva con las fuentes finales.

La carga de fuentes ha sido durante mucho tiempo un problema de rendimiento en la web, y realmente no hay buenas opciones aquí. Si quieres usar fuentes web, tus opciones son básicamente Flash of Invisible Text (FOIT), donde el texto está oculto hasta que se descarga la fuente, o Flash of Unstyled Text (FOUT), donde usas la fuente de reserva del sistema inicialmente y luego la actualizas a la fuente web cuando se descarga. Ninguna de las dos opciones ha “triunfado” porque ninguna es realmente satisfactoria, para ser sinceros.

La propiedad “font-display” de @font-face da la posibilidad de elegir al desarrollador web, mientras que antes era el navegador el que decidía (IE y Edge favorecían FOUT en el pasado, mientras que los otros navegadores favorecían FOIT). Sin embargo, más allá de eso no resolvió realmente el problema.

Yo también era partidario de esto entonces, pero cada vez me encuentro más frustrado por el “efecto de hidratación” cuando la fuente web se descarga y los caracteres se expanden (o se contraen) debido a las diferencias entre las fuentes. Smashing Magazine, al igual que la mayoría de los editores, utiliza fuentes web y la siguiente captura de pantalla muestra la diferencia entre el renderizado inicial (con las fuentes fallback), y el renderizado final (con las fuentes web):

Font-display wordpress

Utiliza el comportamiento de bloque durante un breve período, luego cambia al comportamiento de intercambio y aplica la fuente de reserva al texto.  Si las fuentes web no se han cargado al final del período de intercambio, la fuente de reserva sigue en uso.

Utiliza el comportamiento de bloqueo durante un breve período y, a continuación, aplica la fuente de reserva al texto. El valor da al navegador web la opción de no descargar la fuente web en absoluto, por ejemplo, si el visitante del sitio web tiene una conexión a Internet lenta.

La configuración de la visualización de la fuente para cualquier proyecto existente puede cambiarse siguiendo los pasos anteriores.  Una vez guardados los cambios, la nueva configuración de visualización de fuentes se incluirá en su sitio web como parte del código de incrustación existente. No es necesario hacer cambios en el sitio web en sí.

Font-display: swap wordpress

Al aplicar font-display: swap, le estás diciendo al navegador que utilice la fuente de reserva hasta que la fuente personalizada esté lista (para evitar que el texto sea invisible), y que luego “cambie” a la fuente de reserva con la fuente personalizada. Así, en lugar de ser invisible, esto asegura que el texto permanezca visible durante la carga de la fuente web.

En el @font-face, puede elegir entre algunas opciones de visualización de fuentes. Algunas causan más FOIT mientras que otras causan FOUT. El truco está en encontrar un equilibrio entre ambas, por lo que se recomienda más a menudo la opción “swap”. Si ves el CSS de tu fuente, es probable que esté usando una de las otras opciones.

Si la fuente está siendo inyectada desde un plugin (debería notarlo en su informe de PageSpeed Insights), vaya a su Editor de Plugin, seleccione el plugin que está inyectando la fuente, y vea su archivo CSS.

Logotipo de OMM FinalAcerca de Tom Tom Dupuis comenzó OMM en 2011. Se duerme con documentales de asesinos en serie y vomita en los cubos de basura de Mobil. Lee su biografía para conocer 50 cosas aleatorias e inquietantes sobre Tom y la historia de Online Media Masters.

Display=swap google fonts

CSS font-display te permite controlar cómo se intercambian las fuentes web con las fuentes del sistema mientras/después de que se cargan. Lighthouse le indica que está cargando una gran cantidad de datos de fuentes mediante @font-face, por lo que habrá un retraso (de hasta varios segundos) en el que su contenido estará en blanco mientras espera a que se carguen las fuentes.

Puedes cambiar esto para que una fuente de reserva (de tu sistema local) se cargue de inmediato y luego se intercambie con tus fuentes web una vez que se hayan cargado. (tenga en cuenta que sus fuentes pueden tener diferentes tamaños y hacer que las cosas salten cuando se cargan).

font-display:swap; significa que cuando la página se renderiza, todas las etiquetas de párrafo utilizarán la PRIMERA fuente de reserva disponible hasta que Open Sans Regular se haya cargado. (En este caso, Helvetica en Mac y Arial en Windows).

La característica de la fuente es una técnica para utilizar estilos y efectos de texto avanzados tal y como los ha diseñado el desarrollador de la fuente. Un tipo de letra puede admitir una serie de características: algunos ejemplos son los diferentes tipos de ligaduras, los números tabulares o las versalitas.Esta imagen explica mucho mejor

Ir arriba