1

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?

0

1 respuesta 1

0

Creo que estás confundiendo un poco las peras con las manzanas.

Lo que estás tratando de hacer es usar un fallback font (también conocida como web safe font), que son básicamente fuentes predeterminadas instaladas en el sistema. El propósito de usarlas es básicamente lo que describes; mostrarlas temporalmente mientras carga la fuente personalizada.

Estas fuentes normalmente están categorizadas en 5 font families genéricas: Serif, Sans-serif, Monospace, Cursive y Fantasy. Cada una tiene su propia forma y estilo que las identifica.

Para la familia serif por ejemplo los fallbacks más comunes que te puedes encontrar son:

// Times y Times New Roman son fuentes serif populares: 
font-family: "Times New Roman", Times, serif;

// También esta Georgia, que por cierto es una de las que estás usando:
font-family: Georgia, serif;

Para la familia sans-serif:

// Las clásicas Arial y Helvetica:
font-family: Arial, Helvetica, sans-serif;

// Tambien te puedes encontrar Tahoma o Verdana
font-family: Tahoma, Verdana, sans-serif;

Etc.

La forma en la que esto funciona es que el navegador va intentar usar esas fuentes en el orden que le indiques, por ejemplo en el caso:

font-family: Arial, Helvetica, sans-serif;

Si la fuente Arial no se encuentra instalada, el navegador procede a probar con Helvetica y así sucesivamente.

En fin, el hecho de que pongas alguna de estas fuentes fallback, en teoría ya estarías implementando lo que pretendes hacer.

Ahora, las fuentes personalizadas son aquellas que difícilmente encuentras instaladas en los sistemas, es el caso de las fuentes de Google por ejemplo o de cualquier otra fuente poco común las cuales necesitan de los archivos fuente para poder soportarlas. Esto implica que debes hacer peticiones adicionales en tu página para poder cargarlas y estas peticiones obviamente pueden tardar un tiempo.

Es aquí donde entra el concepto del uso temporal de la fuente fallback, es decir, para el siguiente caso:

font-family: Roboto, Georgia, Helvetica, sans-serif;

Mientras la fuente Roboto termina de cargar, las fuentes fallback como Georgia o Helvetica serán usadas en su lugar. Roboto viene a ser la fuente personalizada que no se va a mostrar hasta que los archivos que la soportan terminen de cargarse e instalarse apropiadamente en el navegador.

1
  • Me dices "el hecho de que pongas alguna de estas fuentes fallback, en teoría ya estarías implementando lo que pretendes hacer". Pero aún así, el PageSpeed Insights, en uno de sus puntos me sigue diciendo "Asegurarse de que el texto permanece visible mientras carga la fuente web". Commented el 20 ago. 2022 a las 13:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.