Utilisation et Optimisation de votre @font-face
@font-face késako?
La propriété CSS @font-face permet d’utiliser n’importe quelle typo sur votre site internet, de ce fait, vous n’êtes plus du tout tributaire des polices installées (ou pas) sur les ordinateurs de vos internautes. Vous pouvez donc dire adieu à vos vieilles images pour palier au problème d’affichage de polices exotiques.
Je n’apprends certainement rien aux plus CSS Addicts d’entre vous, sachez cependant que dans cet article je ne vais pas aborder seulement l’aspect technique de la mise en place de ces polices, l’optimisation et la recherche de police auront aussi la part belle.
Les formats à prendre en compte dans la déclaration de votre @font-face sont donc les suivants :
- .ttf : (truetype) pour Opéra et Safari
- .eot : Format utilisé par IE 4+
- .woff : Format qui va tendre à satisfaire tout le monde, ce format est multiplateforme est utilisé pour IE9+, FF3.6+, Chrome 5+
- .svg : Format pour les mobiles. Les i.os antérieurs à la version 4.2 ne supportent que ce format (les version 4.2+ supportant quant à elles ttf et woff)
Compatibilité des navigateurs
Les « ancêtres » qui supporte le font @font-face sont :
- Firefox 3.5+
- Opéra 10+
- Android 4+ (partiellement supporté à partir du 2.2)
- Safari 3.2+
Comment l’utiliser
Méthode 1
@font-face{
/* Le nom choisi pour la police , il sera utilisé pour les appel font-family */
font-family : "Police";
src : url('Police.eot');
/* Le smiley c'est pour IE, j'y reviendrai plus tard*/
/* Pour le reste, chemin d'accès aux différents formats */
src : local('☺'),
url('Police.woff') format('woff'),
url('Police.svg#abcd') format('svg'),
url('Police.ttf') format('truetype');
}
Vous pouvez vous demander pourquoi IE à son « src » à l’écart des autres? Tout simplement car il ne comprend pas les déclarations en cascade parsemées de virgules. Cependant même s’il ne comprend rien, et c’est ce qui fait son charme (ironie inside), il va essayer de lire la suite ce qui va provoquer des choses pas très claires sur votre page.
Pour le bloquer dans son élan, il faut utiliser l’attribut local. Local va chercher sur le PC une police du même nom. Une chance pour nous, IE ne sait pas du tout ce que c’est que cette « chose ». Pourquoi le smiley? Déjà car il y a très peu de chance qu’un jour une police nommée « ☺ » voit le jour, donc pour les autres navigateurs, il va continuer le chargement des autres formats, et que ce petit ☺ fait seulement 2bytes. Que demander de plus?
L’utilisation du « local » a déclenché un certain nombre de bugs sous Android de ce que j’en ai lu, de ce fait, je vous conseille d’utiliser la seconde méthode ci-dessous. Si les bugs ont été corrigés, n’hésitez pas à me le dire à la suite de cet article pour que je corrige, je ne tourne pas sous Android pour tester tout ça !
Méthode 2
Autre formatage possible, proposé notamment dans les packages « Fonts Kits » du site Font Squirrel
@font-face {
font-family: 'KingthingsGothiqueRegular';
src: url('Kingthings_Gothique-webfont.eot');
src: url('Kingthings_Gothique-webfont.eot?#iefix') format('eot'),
url('Kingthings_Gothique-webfont.woff') format('woff'),
url('Kingthings_Gothique-webfont.ttf') format('truetype'),
url('Kingthings_Gothique-webfont.svg#webfontjrDHapmf') format('svg');
font-weight: normal;
font-style: normal;
}
Fonctionne sur le même principe que la méthode ci-dessus.
L’optimisation du @font-face
La déclaration du format dans les lignes CSS n’est pas obligatoire (ex : url(‘Kingthings_Gothique-webfont.woff’) format(‘woff’) ). Elle reste cependant très importante car elle évite au navigateur de télécharger toutes les polices (.ttf, .eot, .woff etc..) pour trouver celle qui lui est nécessaire.
IE télécharge la police dès qu’il rencontre @font-face.Les autres navigateurs, quant a eux attendent l’affichage du font-family. Si vous utilisez donc plusieurs polices font-face sur votre site/blog, et que par exemple vous utilisez une police particulière uniquement pour la page de contact, faites attention de charger cette police dans le CSS de cette page la, et uniquement celle ci. Si vous souhaitez optimiser le chargement sous IE, il est donc inutile de charger cette police via le CSS général de la page d’index.
Utilisez les webfont via http://www.google.com/webfonts, vous appellerez la police via un CDN Google donc vous lui laissez prendre en charge le chargement de votre police pour votre page (donc ça améliore aussi le temps de chargement de votre page, car vous n’avez plus à vous soucier de ce détail).
Découvrez les polices de vos sites favoris
J’ai découvert cet outil récemment grâce au blog de John Graphism’. Bien sûr, vous avez la possibilité d’avoir la même information en jetant un coup d’œil sur le site avec firebug par exemple, mais cette méthode ne nécessite aucune connaissance particulière en code et elle est nettement plus rapide (info en un clic ! ). What Font fonctionne très simplement, rendez vous sur ce site, bookmarkez ensuite le lien indiqué sur la page en question. Rendez vous ensuite sur le site dont vous souhaitez connaitre la police, et lancez le bookmark. Il vous suffit ensuite de survoler la zone de texte, et vous avez le nom de la police ! Sachez aussi qu’il y a un outil fonctionnant pour les images : What Font is
Les outils
Aller plus loin
Sachez que vous n’aurez jamais une police parfaitement identique sur tous les navigateurs