Dépannage des problèmes de rendu de polices Google dans Chrome

Il n'est pas rare de rencontrer des difficultés de rendu lors de l'utilisation de polices Google dans le développement Web. Un problème spécifique qui a survenu récemment affecte les sites Web à l'aide de la dalle roboto dans Chrome. Bien que la police apparaisse comme prévu dans les autres navigateurs, il reste invisible lors du chargement initial de la page dans Chrome.

À l'étude, cela semble être un bug connu dans Chrome. La cause du problème est que Chrome peut parfois ne pas rendre correctement les polices personnalisées pendant la charge de page initiale. Cependant, une fois qu'une propriété CSS est reposée (par exemple, en survolant un lien stylé), la police devient visible.

Pour résoudre ce problème, une solution de contournement a été développée uniquement sur CSS. En ajoutant le code suivant à votre feuille de style, vous pouvez vous assurer que Chrome rend correctement la police:

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

Cette solution de contournement force essentiellement Chrome pour repeindre le texte, résolvant le problème. Il convient de noter qu'il s'agit d'une solution CSS uniquement et peut ne pas convenir à toutes les situations. Néanmoins, il fournit un moyen efficace de résoudre le problème de rendu Google Fonts dans Chrome.