Éviter les fonts externes

Je sais que je vais pour un relou aux yeux des designers, mais l'utilisation de typos externes a tendance à causer pas mal de problèmes.

Sans parler des performances (parce que oui, télécharger une font entière, surtout avec une connexion pourrie, bonjour le délai), certains navigateurs (dont Chrome, majoritaire sur le marché) gèrent assez mal la chose par moments.

Du coup on se retrouver assez facilement avec des trucs dans le genre :

Ce qui, on en convient, peut vite être fâcheux et faire peur aux utilisateurs non avertis, même si un simple refresh résout le problème.

En fait, "une font entière", en l'occurrence celle qui ne s'affiche pas, c'est 36 ko. 130 ko avec les 2 autres. C'est à la fois beaucoup et peu, puisque le reste de la page est plus gros que ça, et que normalement tu n'as plus besoin de les charger de nouveau avant 1 an.

Partant de ça, on a pris le parti de les utiliser, au moins pour avoir une police correcte sur les tutos : parce qu'une police correcte et disponible, ça ne court pas les rues.

On aurait pu aligner les piles de polices plus ou moins connues, mais là ça pose des gros problèmes de taille, parce que les polices très courantes ont souvent un rendu énorme par rapport aux autres.

Le truc c'est que je vois pas trop ce qu'il y a à gagner en chargeant une typo supplémentaire alors que le reste du site se débrouille très bien sans.

À mon avis les typos Web-safe suffisent largement à avoir un texte lisible, plutôt qu'une jolie typo just because.

Et si j'ai pas appuyé sur le problème des performances, c'est pas pour rien : je sais que vous avez fait ce choix en connaissance de cause. Sauf qu'il y a d'autres problèmes dont celui que vous pouvez constater sur mon screenshot, qui peuvent vite devenir problématique pour des utilisateurs moins expérimentés au dev Web…

Le truc c'est que je vois pas trop ce qu'il y a à gagner en chargeant une typo supplémentaire alors que le reste du site se débrouille très bien sans.

C'est là où tu te trompes : les 3 typo du site (avec empattements pour les tutos et articles, sans empattements, et à chasse fixe pour le code) sont chargées depuis les CDN de Google.

Le but, c'est d'avoir quelque chose d'extrêmement lisible, surtout pour les tutos.

Il me semble qu'il y avait encore des améliorations à faire sur le chargement des polices, par contre.

Yop !

Le chargement va être amélioré quand j'aurais trouvé une solution à un effet pas cool (qui ne dérange que quelques staffeux qui pinaillent un peu).

Mais sinon, le problème des polices "Web-safe" c'est qu'après test, il n'y en a pas en fait. Si tu mets de l'Arial, par exemple, selon l'OS tu tombe sur de l'Ubuntu je ne sais quoi, du Apple truc machin, et ainsi de suite (bon ok, j'exagère). Mais pour des raisons d'uniformisation sur les OS, devices et autres à gérer, on a choisi d'utiliser des polices dites "font-face".

En gros, c'est pas pour faire joli, c'est parce qu'il y a beaucoup de problématiques techniques derrière, et je peux t'assurer qu'on s'est cassé la tête plusieurs jours là dessus… peut-être même plusieurs semaines.

Le chargement va être amélioré quand j'aurais trouvé une solution à un effet pas cool (qui ne dérange que quelques staffeux qui pinaillent un peu).

Pour le coup j'assume totalement même si je n'étais pas le seul à pinailler, je trouve ça encore pire qu'actuellement quand tu as une font qui s'affiche puis une autre qui la remplace 2 secondes après sur toutes les pages systématiquement. C'est très désagréable et fait tout sauf sérieux.

Le soucis c'est qu'actuellement on a l'effet inverse : pas de police du tout (cf le premier screen) puis les polices se chargent. C'est ce qu'on appel l'effet FOUT.

Je regarderais comment je peux faire pour corriger ça. J'ai une idée en tête, mais c'est pas méga urgent.