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

visitardubai · 10 Dic 2019

Asegúrate de que el texto permanece visible mientras se carga la fuente web

Utiliza la característica de CSS "font-display" para que los usuarios vean el texto mientras se carga la fuente web. Más información

URL	Ahorro potencial
…v13/6xKydSBYK….woff2 (fonts.gstatic.com)	20 ms
…v13/6xKydSBYK….woff2 (fonts.gstatic.com)	40 ms
…v13/6xK3dSBYK….woff2 (fonts.gstatic.com)	20 ms
…v13/6xKydSBYK….woff2 (fonts.gstatic.com)	20 ms

ivan455 · 10 Dic 2019

Igual me pasaba, pero al agregar el "font-display: swap" en cada @font-face que encuentres en tu css, se me soluciono

visitardubai · 10 Dic 2019

ivan455 dijo:
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 ?

ivan455 · 10 Dic 2019

visitardubai dijo:
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

visitardubai · 10 Dic 2019

ivan455 dijo:
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....

ivan455 · 10 Dic 2019

visitardubai dijo:
No tengo ni idea de donde esta ese archivo....

Bajate todos tus archivos y abrelos en un editor de texto como visual studio y pon en el buscador "https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2" y quizas encuentre el .css que lo contiene

visitardubai · 10 Dic 2019

ivan455 dijo:
Bajate todos tus archivos y abrelos en un editor de texto como visual studio y pon en el buscador "https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2" y quizas encuentre el .css que lo contiene

Enviame un mp por favor compañero, yo no puedo

misterlopez · 3 Ene 2020

visitardubai dijo:
Enviame un mp por favor compañero, yo no puedo

Si sigues con ese problema avísame.

Hoy me puse a solucionar esto y este post me ayudó.

RSanahuano · 19 Mar 2020

misterlopez dijo:
Si sigues con ese problema avísame.

Hoy me puse a solucionar esto y este post me ayudó.

Alguien por ahí??

RSanahuano · 19 Mar 2020

misterlopez dijo:
Si sigues con ese problema avísame.

Hoy me puse a solucionar esto y este post me ayudó.

Hola. puedo hacerte una pregunta sobre @font-face ???

misterlopez · 20 Mar 2020

RSanahuano dijo:
Hola. puedo hacerte una pregunta sobre @font-face ???

Ahora mismo ya no recuerdo que fichero era cuando lo arregle, fue hace 2 o 3 meses, lo siento.

RSanahuano · 20 Mar 2020

misterlopez dijo:
Ahora mismo ya no recuerdo que fichero era cuando lo arregle, fue hace 2 o 3 meses, lo siento.

ok, gracias.