Probleme avec Font face

Salut,

Quand ma page met du temps a se charger je vois que mes Font-Face s'appliquent avec plusieurs secondes de retard, donc j'ai le temps de voir le texte avec la fonte par default. L'effet est assez laid. Comment eviter ca ?

Si ta police est assez lourde, c'est normal, puisqu'il faut qu'il la charge, et plus elle est pesante et plus c'est long... Après c'est en cache, donc normalement, c'est bon.

Tu as quoi comme format pour ta font?
(et tu as vérifié qu'elle était éligible pour être intégrée à une page web? Toutes les font sous licence ne donne pas d'office ce droit)
Un site qui pourra te dépanner et/ou te renseigner : Font Squirrel
Modifié par Redink (01 Jul 2010 - 11:52)

apericube a écrit :
Salut,

Quand ma page met du temps a se charger je vois que mes Font-Face s'appliquent avec plusieurs secondes de retard, donc j'ai le temps de voir le texte avec la fonte par default. L'effet est assez laid. Comment eviter ca ?

L'effet se fait normalement la première fois, après la fonte est dans le cache du navigateur.

Oui j'ai utilisé Fontsquirrel justement (merci Patidou). Ma fonte pese 60ko pour le .ttf, idem pour le .eot et 100ko pour le .svg

C'est vrai que ca fait beaucoup, surtout si tous ces fichiers sont chargés (j'espere que c'est pas le cas!)

Tu peux déclarer toutes les fontes que tu veux dans la css, elles ne seront chargées que si elles sont utilisées. De plus, le navigateur va utiliser son format préféré et ne pas télécharger les autres versions*.

La version WOFF est bien souvent 50% plus petite que la version TTF, c'est le format de l'avenir déjà utilisé dans Firefox, chrome, Opera, bientôt dans IE9 et, sûrement, dans un futur proche, Safari.


*enfin, il peut y avoir un petit bug à ce niveau avec IE, avec le code de fontsquirrel ça marche.
Modifié par Patidou (02 Jul 2010 - 11:43)

Ok, dernier truc : j'ai des pb de validation avec le code de Fontsquirrel. Comme erreurs j'ai :

Property src doesn't exist

font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in : normal normal

font-style Property font-style doesn't exist in CSS level 2.1 but exists in : normal normal

C'est inevitable ?

J'ai exactement la même erreur de validation. Je pense que c'est inévitable.

Bon.