Ajoutez des polices exotiques dans vos pages web
Un frein à l’originalité, si l’on peut dire, sur le développement web, c’est l’impossibilité d’utiliser des polices personnalisées dans ses pages : si j’ai sur mon PC une bonne trentaine de fontes libres plus originales les unes que les autres, je ne peux m’en servir que dans des images et non pour écrire directement du texte sur la page, car seules les polices installées sur l’ordinateur du visiteur seront reconnues, celles non présentes seront remplacées par la typo de substitution dans le CSS, voir par le type serif ou sans-serif.
Heureusement, plusieurs solutions existent pour rendre disponibles ses polices de façon simple et valide.
Google Font Directory
Google mettait déjà à notre disposition les version de JQuery entre autres, et propose maintenant un moyen de disposer de polices originales depuis leurs serveurs : vous pouvez en consulter la liste ici.
Pour utiliser une de leur police, il suffit d’ajouter la ligne qui lui correspond dans le header, puis une classe dans le CSS y faisant référence. Google vous donne même les lignes à inclure dans l’onglet « use this font » !
Voici un exemple pour la police Ubuntu, créée par les designers de la distribution pour la sortie de la version 10.10 :
(ligne à inclure avant </head>)
Je n’ai pas testé, mais si Google ne proposait pas assez de police à votre goût ou si vous voulez utiliser une police bien précise, Typeface est une librairie Javascript qui vous propose de convertir des polices en fichiers lisibles par un script sur vos sites. La manipulation a l’air assez aisée, le texte est rendu en HTML grâce à un moteur vectoriel et fonctionne même sur les navigateurs anciens mais pas trop (Firefox 1.5, Safari 2, IE 7…).
A vous de tester avec les polices prêtes à l’emploi du site, et de faire des beaux designs de Noël personnalisés
Une propriété CSS3 (donc compatible uniquement avec les navigateurs récents), qui permet d’intégrer une police directement à partir d’un fichier TTF ou OTF stocké sur le serveur ou sur une url. C’est assez simple, il suffit d’ajouter une ligne dans votre fichier CSS précisant la source et l’association font-family.
Pour finir, je recommande de n’utiliser des polices fantaisistes que pour les titres, citations en blocs et éléments importants, pour le corps du texte, préférez une police classique avec ou sans serif. Ne serait-ce que pour la performance (très basse pour les longs textes d’après Typeface) et le confort de lecture.
Image extraite de Hot Fuzz, un film culte avec Simon Pegg et Nick Frost. D’ailleurs, voilà leur prochain film.
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
(dans le CSS, pour avoir un h1 avec la police)
h1 { font-family: 'Ubuntu', arial, serif; }Typeface
Je n’ai pas testé, mais si Google ne proposait pas assez de police à votre goût ou si vous voulez utiliser une police bien précise, Typeface est une librairie Javascript qui vous propose de convertir des polices en fichiers lisibles par un script sur vos sites. La manipulation a l’air assez aisée, le texte est rendu en HTML grâce à un moteur vectoriel et fonctionne même sur les navigateurs anciens mais pas trop (Firefox 1.5, Safari 2, IE 7…).
A vous de tester avec les polices prêtes à l’emploi du site, et de faire des beaux designs de Noël personnalisés
@font-face
Une propriété CSS3 (donc compatible uniquement avec les navigateurs récents), qui permet d’intégrer une police directement à partir d’un fichier TTF ou OTF stocké sur le serveur ou sur une url. C’est assez simple, il suffit d’ajouter une ligne dans votre fichier CSS précisant la source et l’association font-family.
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }Appliquez ensuite le style font-family avec le nom de la police :
h1 { font-family: Delicious, arial, sans-serif; }Pour finir, je recommande de n’utiliser des polices fantaisistes que pour les titres, citations en blocs et éléments importants, pour le corps du texte, préférez une police classique avec ou sans serif. Ne serait-ce que pour la performance (très basse pour les longs textes d’après Typeface) et le confort de lecture.
Image extraite de Hot Fuzz, un film culte avec Simon Pegg et Nick Frost. D’ailleurs, voilà leur prochain film.
