solucionando problemas do Google Fonts renderizar problemas no Chrome

não é incomum encontrar dificuldades de renderização ao usar o Google Fonts no Web Development. Ultimamente, uma questão específica afeta os sites usando a laje Roboto no Chrome. Embora a fonte apareça como esperado em outros navegadores, ela permanece invisível na página inicial da página no Chrome.

Após a investigação, este parece ser um bug conhecido no Chrome. A causa do problema é que o Chrome às vezes pode deixar de renderizar fontes personalizadas corretamente durante a carga inicial da página. No entanto, uma vez que uma propriedade CSS é recuperada (por exemplo, passando pairando sobre um link com estilo), a fonte se torna visível. Ao adicionar o código a seguir à sua folha de estilo, você pode garantir que o Chrome renderize a fonte corretamente:

Body { -Webkit-Animation-Delay: 0,1s; -Webkit-animation-name: fontfix; -webkit-animação-duração: 0,1s; -webkit-animação-alerada-contagem: 1; -Webkit-animação-timing-função: linear; } @-webkit-keyframes fontfix { de {opacidade: 1; } para {opacidade: 1; } }

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; }
}