28172 sujets

CSS et mise en forme, CSS3

[Résolu] Flash Of Unstyled Text (FOUT)

Hello !

J'utilise, dans mon blog de voyage, des polices que je charge via @font-face. Mon problème est le suivant : au chargement de la page, le texte apparaît pendant un cout instant (le temps que les polices chargent) dans la police par défaut du navigateur.

Ma question est simple, comment faites-vous pour éviter cet effet indésirable sur vos sites ?

Le site en question : https://usa.gbauer.fr
Modifié par Bguigui67 (02 Aug 2016 - 02:49)
Administrateur
Hello,

C'est un très vaste sujet et il y a énormément de choses à dire sur le sujet du FOUT et du FOIT ("i" = "invisible")

Pour commencer, parmi les nombreuses conférences à ce sujet, je t'invite à jeter un oeil sur celle-ci qui dégrossit pas mal le sujet : https://speakerdeck.com/bramstein/web-fonts-performance

Ensuite, et en très résumé parmi les actions à mener voici celles qui pourront avoir de l'effet :

1- Choisir le bon format de fonte. Ici, ta fonte est en .ttf qui est un format non compressé. Il est vivement conseillé d'opter pour du .woff2, et du .woff en backup (en général, .woff2 est 2x plus léger que .ttf)
2- Ne conserver que le nécessaire dans ta fonte. Avec des outils comme Fontsquirrel, tu peux écarter les langues et glyphes qui ne te seront jamais utiles, et du coup alléger énormément ton fichier
3- Réduire le nombre de requêtes : tu peux utiliser la déclaration "local()" pour éviter de charger une police inutilement
4- Tu peux charger ta police de manière asynchrone (soit en data-uri, soit via des script JS tels que fontfaceobserver notamment)
5- Tu peux choisir de charger ta police de manière conditionnelle en plaçant ton @font-face dans un @media (tu peux ainsi choisir de ne pas la charger sur mobile par exemple)
6- Tu peux choisir de charger ta police *avant* que ta requête vers ta feuille CSS n'opère, tout simplement en écrivant ton @fotn-face directement dans un élément <style> au sein du <head>
7. etc.

Bonne chance Smiley smile
Modifié par Raphael (02 Aug 2016 - 09:27)
Hello Raphaël,

Merci pour ces pistes. Je ne manquerais pas de les explorer toutes en détail. Pour l'instant, la solution qui semble fonctionner, c'est l'intégration des polices au format woff et woff2 directement en base64 dans une feuille de style. C'est pas très beau à voir, le fichier CSS est pas léger, mais ça marche Smiley smile
Sujet clos
Aller à