Utiliser la police Ubuntu en web
La dernière version d'Ubuntu en date (10.10) inclut une nouvelle police, appelé avec originalité Ubuntu. La licence est assez permissive et prévois la possibilité de l'inclure dans vos documents. Et donc dans une page web. C'est ce que je vais vous montrer aujourd'hui.
Ubuntu font
Pour cela on va d'abord commencer par récupérer les fonts sur le site officiel. Pour l'instant il n'y a que 4 familles disponibles (Regular, Bold, Regular Italic & Bold Italic). D'après ce que je vois sur le site, il semblerai que d'autres familles puissent voir le jour (Light, Medium, Condensed, Monospace...).
Il y a une archive sur le site qui contient ses .tff. Elle est régulièrement mise à jour, à l'heure où j'écris ces lignes on en est à la version 0.68.
Générateur de font-face
@font-face est une propriété CSS qui permet d'inclure n'importe quelle font dans votre document web. L'inconvénient c'est qu'il n'y a pas (encore ?) de format officiel, et donc les navigateurs font un peu ce qu'ils veulent à ce niveau là. C'est là où notre outil rentre en jeu : il va automatiquement, à partir de nos .tff, générer tous les formats pour tous les navigateurs supportant @font-face.
Concrètement il suffit d'aller sur cette page (fontsquirrel), et d'uploader nos 4 ttfs. Prenez le mode expert et laissez tout par défaut, sauf la fonction Style Linking qu'il faut cocher. Car nous avons 4 styles de .ttfs et c'est plus simple de les lier en une seule famille et ensuite de jouer sur font-weight & font-style.
Le site vous génère donc une archive avec les fichiers fonts nécéssaires et une page html avec un CSS modèle.
Démo
Conclusion
Je pense que la font principale de mon blog va devenir celle-ci quand elle aura d'autres familles dont j'ai besoin (light, condensed & monospace). Pour l'instant je reste avec Proxima Nova Condensed ;)
Articles similaires
- Wallpapers of the Week 1-62 by *inmymind81 So High. by =GoldenCadillac 26th - Breeze by *BSA-Danny The ...
- Utiliser d'autres polices en web : google et typekit Si vous vous intéressez un peu au développement web, vous ...
- Lithium - Un thème noir pour Gnome Lithium est un thème assez réussi je dois l'avouer. Un ...
- Wallpapers of the week J'ai réussi à vous trouver cette semaine de nouveaux fonds ...
- Wallpapers of the week On ne change pas les habitudes, nouvelle semaine, donc une ...