Font-face ou cufon : qui des deux est le meilleur ?

Vous en avez marre de devoir toujours utiliser des fontes standard par peur que les internautes ne voient pas votre site web comme vous le voulez ? Maintenant vous avez deux solutions : @font-face et cufon

Font-face

@font-face est une règle qui permet de spécifier une police (standard ou pas) de caractères à télécharger, afin d’afficher la page telle que souhaitée par l’auteur, en un mot : utilisation du paramètre css @font-face

Utilisation :

Dans la feuille de style, la syntaxe à utiliser est la suivante :

@font-face { /* On donne un nom (au choix) à la fonte téléchargée */font-family: "SuperFonte"; /* On indique le chemin du fichier de fonte à télécharger */ src: url("super-fonte-regular.otf") format("opentype"); /*L'indication du format n'est pas obligatoire */ }

Une fois ce code défini, le navigateur va estimer que « SuperFonte » est le nom de la fonte téléchargée, et on pourra alors utiliser ce nom dans nos styles CSS habituels :

body {font-family: "SuperFonte", Verdana, sans-serif;}

Avantages de font-face :

• facile à manipuler
• on peut utilisé n’importe quel police en mode texte.
• il est implémenté correctement par tous les navigateurs récents : Safari 3+, Google Chrome 3+, Firefox 3.5+, Opera 10+ et même Internet Explorer le prend en charge depuis sa version 4, certes en utilisant un format propriétaire : l’Embedded OpenType (EOT)

Inconvénients de font-face:

Aussi intéressante qu’elle soit, cette solution présente quelques inconvénients :

Le premier inconvénient, c’est qu’une police de caractères est constituée de plusieurs fontes, et si on souhaite utiliser les différentes fontes (Regular, Italic, Bold, Bold Italic, etc.), il faudra charger autant de fichiers. Le problème réside donc dans le poids de la page car ces fichiers peuvent peser de quelques kilo-octets à plusieurs mega-octets pour certaines polices.

De plus, le fichier téléchargé dans l’exemple ci-dessus sera illisible pour tous les ordinateurs utilisant Internet Explorer car ce dernier ne reconnait pas les fichiers de type OpenType (.otf). Un problème de compatibilité s’ajoute alors à la liste d’optimisations à faire pour Internet Explorer. Il sera donc nécessaire de charger d’autres fichiers enregistrés dans un format lisible par Internet Explorer ce qui aura pour effet d’alourdir encore le poids de la page.

Ressources :

http://www.clever-age.com/veille/blog/l-emergence-de-font-face.html
http://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web
https://developer.mozilla.org/fr/CSS/@font-face

Exemple :

http://www.chefdeprojetinternet.com/portfolio/

Cufon

Il s’agit de faire appel à JavaScript afin de charger la ou les polices désirées et ensuite de les assigner aux bons éléments de la page.
Grâce à un script, vous allez pouvoir afficher la police que vous voulez sur votre site.

Utilisation :

Cette méthode fonctionne de la manière suivante :

• Insertion du fichier JavaScript nécessaire au bon fonctionnement de la solution : cufon-yui.js
• Génération du fichier de polices à l’aide du site internet de Cufon : votre_police.js (à généré ici)
• Assignation des polices à l’aide de jQuery : »Cufon.replace(‘h1’); // si on utilise la police pour des titres h1″

Avantages :

• Le poids de la police est réduit par rapport à font-face
• La méthode est compatible avec tous les navigateurs

Inconvénients :

• Un peu plus difficile à manipuler pour les débutants
• Le gros désavantage de Cufon est la pollution de la code source du site.

Ressources :

http://www.alsacreations.com/actu/lire/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html

Utiliser Cufon sur votre blog WordPress !

http://blog.firehist.org/2010/03/04/cufon-lalternative-au-police-du-web/
http://www.tagexpert.com/blog/polices-exotiques-cufon-vs-font-face

Exemple :

http://www.alsacreations.com/actu/lire/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html

Donc vous avez maintenant 2 solutions pour contourner l’utilisation des fontes standard dans vos sites.

Il suffit de bien choisir!!!

The following two tabs change content below.

andy

Œuvrant dans le monde du web, j'essaie de transmettre cette passion pour cet univers en perpétuelle évolution et dont l'influence ne cesse de grandir.