CSS3
Changer la police
Pouvoir définir la police d'une page est quelque chose d'important car elle va donner une grande personnalité au document.
Utiliser une police standard
Le web est longtemps resté limité en terme de police. Et quoi qu'il en soit, cela continue. En effet, La page affichée est toujours liée à l'interprétation qui en est donnée par le navigateur.
La propriété CSS font-family permet de spécifier la police à utiliser :
font-family : comic sans msComme la police Comic sans ne sera peut être pas installée sur l'ordinateur du visiteur, on va mentionner une série de plusieurs, par ordre de préférences :
font-family : comic sans ms, timesIci, si le navigateur ne trouve pas la police Comic sans, il chargera times à la place. Et dans le cas où il ne trouverait pas, il faudra placer une police de substitution neutre en mentionner simplement le style de police souhaité parmi sans, serif ou cursive.
font-family : comic sans ms, times, serif
Charger une police personnalisée avec @import
Les polices polices personnalisées commencent peu à peu à apparaître sur les sites grâce à la promotion de certaines personnes et groupes de travail qui ont en partie œuvré à la libération de certaine polices de manière à ce qu'elles soient partageables (ce qui n'est pas le cas de la plupart des polices commerciales et propriétaires). Parmi ces groupes on retrouvent ceux issus du mouvement du logiciel libre tel que Openfontlibrary ou encore Flossmanuals dont le manuel Fontes Libres a servi de référence à de nombreux typographes dans le monde, puis ensuite Google qui a crée un dépôt de polices libres, en général sous licence OFL.
Le plus simple sera d'utiliser le site openfontlibrary ou le site google fonts.
Dans la page d'accueil du site
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Share+Tech);
ou encore
@import url(http://fonts.googleapis.com/css?family=Lobster);
@font-face
L'utilisation de l'instruction @font-face permet d'aller plus loin dans l'importation de polices en définissant sa relation aux caractéristiques typographiques courantes.
@font-face {
font-family: 'Londrina Shadow';
font-style: normal;
font-weight: 400;
src: local('Londrina Shadow'), local('LondrinaShadow-Regular'),
url(http://fonts.gstatic.com/s/londrinashadow/v3/dNYuzPS_7eYgXFJBzMoKdf8mOSX00gsdbtRvMGBBXNY.woff) format('woff');
}
On pourra alors se référer à elle par :
font-family : Londrina Shadow;et elle s'appliquera pour du normal (sans gras et sans italique).
Analyser le temps de chargement de la police
Évidemment; à toute fonction sympathique, on trouvera à redire. Le propre des polices est d'alourdir considérablement le poids de la page web puisque le navigateur devra télécharger les polices (sans que le visiteur n'ait rien à faire). C'est donc autant de temps d'attente pour le visiteur potentiel. Et un visiteur qui attend de trop c'est peut être un visiteur qui s'enfuit.
Astuce 1 : Choisir une police peu commune mais pas trop
Une première astuce consite à utiliser des polices qui ne sont pas trop rares. Celles-ci étant présentes sur d'autres sites auront peut-être déjà été téléchargée et seront peut-être encore dans le cache du navigateur, ce qui évitera d'aller les chercher à nouveau.
Astuce 2 : Choisir une police disponible sur un serveur partagé
Mais pour que cela marche, il faut que la police utilisée soit bien placée à la même URL : c'est le cas si vous utilisez Google Fonts ou openFontLibrary mais ce ne sera pas le cas si vous téléchargez la copie pour la mettre à disposition sur votre prore site. Il exist ede nombreux critères pour choisir son serveur et pas seulement la police elle-même (voir schéma plus loin).
Astuce 3 : Prendre juste le nécessaire
Concernant la sélection des polices, vous aurez souvent besoin de plusieurs styles (normal, gras, italiques voire plus). Ne prenez que les styles nécessaires. Plus de styles, cela signifie aussi plus de fichiers à charger et par conséquent autant de ralentissement. Google Font indique par un petit diagramme une approximation du temps nécessaire. Les chiffres écrits sont complétement factives puisqu'ils dépendant aussi et surtout de la rapidité de la connexion du visiteur, mais cela donne une idée, en proportion.
Astuce 4 : Modifier la police
Si vous êtes obligés d'utiliser une police rare ou originale et peu fréquente, vous pourrez aussi enlever tous les caractères inutiles. Car si certaines polices sont livrés sans accents (ce qui est dommage pour le français puisqu'il faudra les rajouter), d'autres sont au contraire livrées avec parfois des caratères de langues que vous ne ciblez par : arabe, chinois, vietnamien ou autres. Dans ce cas, si les polices vous appartiennent ou qu'elles sont libres, ouvrez les dans FontForge et faites les suppressions ou ajouts nécessaires. Cela prend un peut de temps mais représente un vrai gain. Dans l'exemple ci-dessous, la police Big Bottom Cartoon original fait 459 ko avec de nombreux ccaractères manquants. Nous l'avons un peu optimisés (il y a encore du travail à ce niveau). cela l'a rendu plus glégère et nous avons pu y rajouter les accents et même un italique pour un poids total inférieur au fichier d'origine.
Astuce 5 : Ne pas vous fier à votre impression, utilisez un outil externe
Comme souvent sur le web, le pire est de croire que les visiteurs auront la même chose que nous. Concernant les polices, cela ne change pas. Peut-être que chez vous, le téléchargement sera rapide cela sera même évident puique la police sera soit installée si vous l'utilisez régulièrement soit en cache. Testez à partir d'un périphérique neutre, ou un site web d'analyse. Par exemple, le site http://webpagetest.org permet d'obtenir des informations intéressantes.
On y voit que ce n'est pas toujours le poids du fichier qui rallonge, mais parfois simplement la charge du serveur qui émet la police. Dans le chamin suivant, comparez les données associées à fonts.googleapis.com et openfontlibrary en sachat que Roboto fait en totalité (toutes variantes soit 12) 918ko sur Google et Singlish 25,4ko sur openFontLibrary.
