Certains utilisent sIFR, d’autres utilisent Cufon et d’autres préfèrent @font-face en CSS. Le but de ce billet n’est pas de vanter une des techniques en particulier, mais plutôt de vous décrire la technique Â@font-face qui est à mon avis, quelque peu délaissé. Cette technique pourrait par contre être de plus en plus utilisée avec l’utilisation de CSS3.
@font-face n’est pas une nouveauté de CSS3. Cette technique était déjà présente avec CSS2 et nous pouvions même l’utiliser avec la version 5 d’Internet Explorer. Le problème est qu’elle prenait seulement en compte les polices ayant le format .eot et les autres navigateurs, à l’époque, avaient décidé de ne pas utiliser ce format.
@font-face est une propriété CSS qui est prise en compte par Firefox depuis la version 3.5 (donc il y a peu de temps…) ce qui peut expliquer le pourquoi qu’elle n’est pas encore la plus populaire à l’heure actuelle.
Comme sIFR et Cufon, elle apporte l’avantage que les utilisateurs d’un site Web n’ont pas à avoir les polices utilisées sur le site Web. Par exemple, je pourrais décider que mon texte est uniquement écrit en Futura et même si vous n’avez pas cette police d’installé sur votre ordinateur, vous verriez pareil l’affichage avec le texte en Futura.
Cette méthode ne requiert également aucun code JavaScript comparativement à Cufon et sIFR. Nous n’avons donc plus besoin de nous soucier si JavaScript est activé ou non.
Jusqu’à maintenant, cette technique semble avoir que des avantages, mais elle n’est évidemment pas parfaite. En effet, en utilisant la technique @font-face en CSS, nous exposons facilement à la vue de tous le téléchargement de nos fontes. En regardant notre code source, n’importe qui peut voir l’emplacement du fichier et le télécharger. Ce n’est pas un problème pour des fontes gratuites, mais dû moment que ce sont des fontes payantes, nous tombons dans l’illégalité.
Prenons par exemple une personne achetant son pack Helvetica. Il utilise Helvetica Neue pour son texte et utilise @font-face. Je me rend sur le site Web en question, analyse quelque peu le code source et en moins d’une minute j’ai maintenant Helvetica Neue comme nouvelle fonte sur mon ordinateur.
La ligne peut être mince quant à l’utilisation de cette méthode. Elle peut être fort utile si vous utilisez des fontes gratuites qui ne se retrouvent pas nécessairement sur l’ordinateur de vos visiteurs. Par contre, il faut rester très vigilant pour ne pas tomber dans l’illégalité.
Dans le prochain billet, je montrerai un exemple d’utilisation de la technique @font-face.
Quel développeur web n’a pas grandement entendu parlé d’HTML5 au cours des derniers mois ou dernières semaines? Ayant moi-même été inondé de contenu dans mon Twitter, j’ai également suivi la vague et j’ai commencé à m’y intéresser de plus en plus.