La typographie sur le Web monte en puissance. Google ajoute des fontes supplémentaires à son répertoire Google Font Directory qui compte désormais près de 60 typos prêtes à l’emploi grâce à Google Font API. Cette bonne nouvelle s’accompage de l’arrivée de Google Font Previewer for Chrome. Cette extension vous permettra de choisir votre typographie parmi les fontes disponibles et d’effectuer les réglages nécessaires (taille, style, graisse, ombré, casse, etc.). Reste à copier-coller le code fourni par Google Font Previewer pour rendre vos pages plus belles (ou pas) !
Google Font Previewer
Testez les fontes directement sur la page affichée dans votre navigateur, puis copiez-collez le code fourni.
Exemple de code
Voici le code fournit par Google Font Previewer pour la police de caractère IM Fell DW Pica SC à insérer entre les balises `head` de vos pages Web :
<link href="http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC:regular&subset=latin" rel="stylesheet">
<style>
body {
font-family: 'IM Fell DW Pica SC', serif;
}
</style>Attention : si vous êtes en train de rédiger un billet lorsque vous essayer les différentes polices de caractère depuis Google Font Previewer, vous risquez de perdre les modifications qui n’ont pas été enregistrées.
J’en ai profité pour tester la police Neuton pour l’ensemble des titres de ce blog.
Les polices de caractère de Google Font Directory
L’extension Chrome est très intéressante, il faudrait creuser l’idée avec la possibilité de pointer un dossier local de fonts, ça en jetterait plein les yeux au client, et ça lui permettrait de choisir (enfin !).
A noter que l’extension existe aussi chez Firefox à l’adresse https://addons.mozilla.org/fr/firefox/addon/175842/
Ha, précision, l’extension firefox peut afficher des fonts venant d’autres répertoires que Google. Et c’est encore une victoire pour renard WC !
L’API est-elle compatible avec IE6, 7 et 8 ?
Hey, très bonne question… J’ai regardé la CSS proposée par Google, et elle ne contient que du format truetype.
Je crois savoir que le format retenu par IE est woff, mais c’est à vérifier.
Mon IE 8 charge le format eot parmi les formats ttf, woff, et svg. Qui veut poursuivre l’enquête ?
… et Disqus bugue !
Je testerai avec IE6 dans la soirée. C’est quoi le bug avec Disqus ?
un renvoi « erreur systeme » au post du message. Il a fallu poster deux trois fois avant que ça prenne. (XP SP2 Chrome 8.0.552.224 (last release)).
Résultats des tests sur IE 8 :
-effectivement, s’il n’a que le format ttf, il ne le charge même pas (goujat)
-il faut une url vers le format eot
-il faut une propriété src qui ne pointe QUE le format eot, à mettre avant la seconde propriété src qui pointera tous les autres formats.
Sans cette disposition très particulière, il semble que IE 8 ne veuille pas entendre parler des polices !
Test mené avec XP SP2, IE8 & debugbar, serveur Apache, police maison formats ttf, eot, svg et woff, désinstallés au préalable du répertoire des polices.
Briegel02 — Normalement, le principe de ces API est de proposer un système comptatible avec IE. Je viens de lancer mon Netbook pour vérifier dans IE6, et les titres s’affichent bien avec la police Neuton.
Bah oui, c’est très étrange, j’ai tenté de reproduire exactement les mêmes conditions (la même CSS que celle générée par l’API, à la différence des urls vers d’autres fichiers de police ttf), et ça ne fonctionne qu’avec l’API.
Je finis par me dire que la différence tient à la police elle-même, et au codage du format ttf !
perso j’ai un petit soucis aces ne de ces font ici : http://www.sutterlity.fr
Le problème survient sous ie8 et inférieur, la type se pixelise. Si quelqu’un a une solution.
100% gratuit : http://www.fontsquirrel.com/fontface
Des centaines de Fontes à télécharger… ou à générer.
Chaque @font-face font kit vient avec :
TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone
Cufón fonts in case you want them
Demo.html and stylesheet.css so you can get going fast