iOS 4.2 et les polices d'écritures

[Deleted member 2927]

Bonjour,

Voilà, j'ai un souci qui me semble tout "bête" et sur lequel je bute pourtant depuis hier sans trouver la moindre explication logique. J'ai voulu implémenter sur mon site de photo de concert deux polices d'écriture qui changent un peu d'arial, helvetica & co.

Molengo, qui est fournit via un code depuis Google (ou qu'on peut télécharger pour l'installer via @font-face en fait), fonctionne impeccablement sur Firefox et Safari (pas de PC sous la main pour tester IE, mais je suis confiant)

Là où ça se complique, c'est pour ma seconde font, achetée sur MyFonts.com, elle est en OTF uniquement. J'ai pu en faire des versions TTF, EOT, WOFF pour les divers navigateurs (c'est quand ils veulent pour se mettre d'accord, au lieu d'en inventer un nouveau à chaque fois... ) et en bonus, le fameux SVG de nos chers iPhone et iPad.

Et c'est là que je bloque, puisque Molengo, certes fournit via Google, est bien géré par mon iPhone. Par contre, ma font, hébergée sur mon site, ne fonctionne que sur le mac. Safari Mobile ne veut rien entendre.
Là où ça m'étonne, c'est qu'en plus je lis sur internet que depuis iOS 4.2, Safari Mobile reconnait même les TTF/OTF.

Voilà, si quelqu'un a des idées de piste à vérifier. J'ai même poussé le truc jusqu'à utiliser une police libre, utilisée sur d'autres sites. Cette police fonctionne pour mon iPhone sur leur site, mais pas sur le mien.

Mon site : http://www.2eyeswideopen.com/ (la police qui ne fonctionne pas est celle des titres d'articles, balises <h2>)

Les liens vers les styles (font-face) des fonts :

<link href='http://fonts.googleapis.com/css?family=Molengo&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://www.2eyeswideopen.com/blog/wp-content/themes/pixeled/brushtip/style.css' rel='stylesheet' type='text/css'>

Le contenu du style.css généré par Font Squirrel (mais même en mettant une version simplifiée, ça ne changeait rien côté iPhone/iPad.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 28, 2010 */



@font-face {
    font-family: 'brushtipTravisbrushtipTravis';
    src: url('bttravis-webfont.eot');
    src: local('☺'), url('bttravis-webfont.woff') format('woff'), url('bttravis-webfont.ttf') format('truetype'), url('bttravis-webfont.svgz#webfontigkg8Qr1') format('svg'), url('bttravis-webfont.svg#webfontigkg8Qr1') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

[Anonyme]

En fait, ta fonte perso ne marche pas du tout, parce que dans le fichier de déclaration de la fonte tu la nomme :

@font-face {
    font-family: '[B]brushtipTravisbrushtipTravis[/B]';
    src: url('bttravis-webfont.eot');
    src: local('☺'), url('bttravis-webfont.woff') format('woff'), url('bttravis-webfont.ttf') format('truetype'), url('bttravis-webfont.svgz#webfontigkg8Qr1') format('svg'), url('bttravis-webfont.svg#webfontigkg8Qr1') format('svg');
    font-weight: normal;
    font-style: normal;
}

Et dans ta feuille de style :

.topPost h2.topTitle a {
  font-size: 1.7em;
  font-family: [B]brushtipTravis[/B], Molengo;
  color: #fff;
  }

Autre chose, tu as une erreur 404 sur :

<link href='[URL="http://forums.macg.co/view-source:http://www.2eyeswideopen.com/wp-content/themes/pixeled/bebas/stylesheet.css"]http://www.2eyeswideopen.com/wp-content/themes/pixeled/bebas/stylesheet.css[/URL]' rel='stylesheet' type='text/css'>

Ça serait bien de regrouper les css autant que possible, pour économiser les requêtes http.

 

[Deleted member 2927]

Merci. Le nom de la font a été modifié par Font Squirrel, mais meme en écrivant "brustipTravisbrushtipTravis" ca ne semble pas fonctionner.

Je vais remodifier tout ça et voir le résultat.

Donc chez toi les titres n'utilisent pas du tout cette font ? Chez moi oui, mais l'ayabt sur le mac ça m'a peut etre induit en erreur :/

Pour le 404, c'était un essai. Je crois avoir supprimé les fichiers de cette font. Tu t'es servi de quoi pour la détecter ?

 

[Anonyme]

Ton fichier de déclaration de police doit se trouver avant le fichier principal. Mais perso je regrouperais les deux en plaçant la déclaration au début évidemment.

Bien vider le cache du navigateur et, si il y en a un, celui de wordpress.

 

[Deleted member 2927]

Bon ma question était effectivement "bête", c'est le nom de la police qui posait problème.

Par contre ça ralenti pas mal le chargement sur un iPhone en edge.

Je vais suivre ton conseil gloup gloup pour le fichier de déclaration, merci

Un dernier point du coup, si Safari Mobile a le choix entre la font SVG et les TT/OTF, il privilégie le SVG? Parce que la concersion en SVG a fait passer le poids des font des 200ko et quelque à 500ko A moins que la SVG serve à d'autres navigateurs ?

 

[Anonyme]

iOS jusque 4.1 utilise les fontes svg*, après c'est les TTF.

Pour ton problème de poids de fichier, tu peux utiliser un subset avec le generator de fontsquirrel pour ne garder que les caractères utiles en français.

Tu peux aussi, avec les media queries, ne pas utiliser de fontes personnalisées quand on utilise un mobile :

@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 2) 
{ 
body {font-family: verdana, arial, helvetica, sans-serif}
/*etc*/
}

Il faut placer ce code à la fin du fichier principal.

*et les vieilles versions d'Opera il me semble.

 

[Deleted member 2927]

J'ai essayé pour le subset, je gagne 70ko (280->270) sur les TTF qui retrouve plus ou moins la taille du fichier OTF initial et 150ko sur le SVG (570->430). Ca sera toujours ça de pris, me reste plus qu'à uploader ça et surtout améliorer mon CSS rempli de choses inutiles j'ai l'impression (surtout concernant les font-size et les balises h1, h2... y a beaucoup de boulot ! )

Merci encore pour ton aide. Au fait, le 404, comment tu l'avais vu alors ? Y a des plugin pour Firefox pour ça ? Soft ?

 

[Anonyme]

Tu peux voir ça avec l'extension firebug pour Firefox ou activer le menu développeur (prefs) dans Safari et utiliser l'inspecteur. Outils indispensables.

 

[Deleted member 2927]

Oui, j'avais totalement oublier le menu dev de Safari. Ils y ont même mis les Safari mobile des iphone/ipad dans les user agent. Hyper pratique
Vais installer firebug, vu que j'utilise pas mal firefox au quotidien.

Encore merci pour ton aide précieuse !