Cómo utilizar font-display en CSS para una carga más rápida de fuentes web

  • Autor Autor visitardubai
  • Fecha de inicio Fecha de inicio
V

visitardubai

1
Ro
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Igual me pasaba, pero al agregar el "font-display: swap" en cada @font-face que encuentres en tu css, se me soluciono
 
Donde se agrega ?

En mi caso me toco agregarlos en este archivo "font-awesome.min.css" y le coloque a cada @font-face que cargaba cada fuente lo que te digo "font-display: swap"
por ejemplo:

@font-face {
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-weight: 900;
src: url(../webfonts/fa-solid-900.eot);
src: url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.woff) format("woff"), url(../webfonts/fa-solid-900.ttf) format("truetype"), url(../webfonts/fa-solid-900.svg#fontawesome) format("svg");
font-display: swap /* se agrega */
}

en tu caso sería buscar que archivo css carga esas fuentes
 
En mi caso me toco agregarlos en este archivo "font-awesome.min.css" y le coloque a cada @font-face que cargaba cada fuente lo que te digo "font-display: swap"
por ejemplo:

@font-face {
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-weight: 900;
src: url(../webfonts/fa-solid-900.eot);
src: url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.woff) format("woff"), url(../webfonts/fa-solid-900.ttf) format("truetype"), url(../webfonts/fa-solid-900.svg#fontawesome) format("svg");
font-display: swap /* se agrega */
}

en tu caso sería buscar que archivo css carga esas fuentes
No tengo ni idea de donde esta ese archivo....
 
Atrás
Arriba