Cufon – Rendre les polices invisibles durant le chargement des pages

Durant le chargement des pages, les polices utilisant la méthode  Cufon peuvent prendre des proportions de taille importante durant le temps de chargement. Cela diminue la qualité de votre site.

La solution que l’on trouve de prime abord est d’ajouter une classe css censée empêcher l’affichage des titres ou de la page toute entière durant le chargement :

.cufon-loading h1 { visibility: hidden; }

pour les titres

.cufon-loading body { visibility: hidden; }

pour la page entière

Pourtant il semblerait que cette solution ne fonctionne pas toujours.

Voici une alternative sûre à 100%:

h1 { visibility: hidden; }

.cufon-ready h1 { visibility: visible; }

(A adapter en remplaçant h1 par l’élément qui contient les polices)
pour la page entière :

 body { visibility: hidden;}

.cufon-ready body { visibility: visible;}

C’est cette fois la page ( ou les titres) qui est rendue invisible jusqu’à ce que la police soit complètement chargée.