Solución de problemas de Google Fonts Rendering Problemas en Chrome

No es raro encontrar dificultades de representación cuando se usa fuentes de Google en el desarrollo web. Un problema específico que ha surgido recientemente afecta a los sitios web que usan la losa de roboto en Chrome. Si bien la fuente aparece como se esperaba en otros navegadores, permanece invisible al cargar la página inicial en Chrome.

Tras la investigación, este parece ser un error conocido en Chrome. La causa del problema es que Chrome a veces puede no hacer que las fuentes personalizadas correctamente durante la carga inicial de la página. Sin embargo, una vez que se retira una propiedad CSS (por ejemplo, rondando un enlace de estilo), la fuente se vuelve visible.

para resolver esto, se ha desarrollado una solución que se basa únicamente en CSS. Al agregar el siguiente código a su hoja de estilo, puede asegurarse de que Chrome rinde la fuente correctamente:

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Esta solución esencialmente obliga a Chrome a volver a pintar el texto, resolviendo el problema. Vale la pena señalar que esta es una solución solo CSS y puede no ser adecuada para todas las situaciones. Sin embargo, proporciona un medio efectivo para abordar el problema de representación de Google Fonts en Chrome.