Estoy queriendo optimizar mi sitio web y he utilizado la herramienta PageSpeed Insights para diagnosticarla. En una de las tantas cosas a corregir me sale "Asegúrate de que el texto permanece visible mientras se carga la fuente web" y ahí quiero enfocarme.
Si bien me sale más información para ver más detalles, hay algo que no entiendo. La idea es como dice allí "Asegurarse de que el texto permanece visible mientras carga la fuente web" y entonces mostrar temporalmente una fuente del sistema. Ese es mi problema, yo quiero que se muestre, por ejemplo, temporalmente la fuente que traigo desde [https://fonts.google.com/] 1 pero que después (y esto es lo importante), cuando se cargue toda la página, se visualice mi fuente (la que ya tenía en mi archivo .css).
En mi index pongo lo siguiente, según me trae la fuente de google, ubicando estas líneas antes de mi página de estilos (Filtro.css):
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
...
<link rel="stylesheet" href="Filtro.css">
Luego, voy al archivo donde están mis estilos (Filtro.css) para agregar lo que falta que es: font-family: 'Roboto', sans-serif;
el tema es que yo ya tengo en se archivo de estilos mi font-family el cual es:
body{font-family:Georgia,Helvetica,sans-serif;}
Y ahora, ¿Cómo o dónde debería agregar el font-family: 'Roboto', sans-serif
? Para que me cargue ese 'Roboto' y luego automáticamente (cuando se vea todo la página) quede el de Georgia,Helvetica.
Ya he intentado de hacer esto:
font-family:'Roboto',Georgia,Helvetica,sans-serif;
pero siempre me queda la fuente 'Roboto' en la página y no me la cambia nunca a mi fuente personalizada (Georgia o Helvetica). Debería hacerlo o es lo que quiero lograr.
¿Que estaría haciendo mal? o bien ¿Que me recomendarían para que se haga lo de mostrar una fuente de manera temporal y luego cambie por la que ya tenía en mi archivo .css?