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

Lien vers la 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 ;)