Softiblog : Le blog de l'agence web Softibox

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

Posté par andy 23 - septembre - 2010

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 à utilisée 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 (Ă  tĂ©lĂ©charger ici)
  • 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 le 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Ă©butant
  • 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
http://www.fran6art.com/webdesign/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!!!

Les commentaires sont fermés.
Google Medic Update, la mise a jour qui fait du bruit.

Depuis fin aout 2018, des turbulences ont été observées au ...

Tierce Maintenance Applicative - La solution pour la maintenance de votre site ?

La Tierce Maintenance Applicative, connu Ă©galement sous le sigle TMA, ...

RGPD bouleverse internet !

Le RGPD ou "Règlement général sur la protection des données", ...

Google Maps devient payant !

Depuis février 2005 le service de cartographie de Google Maps ...

M-commerce - l'E-commerce devient mobile !

Le marché du mobile est en perpétuelle croissance ces dernières ...