Présentation
Il existe depuis les spécifications CSS2 une propriété permettant d’appliquer une police d’écriture hébergée sur un serveur local ou distant. Cette propriété est @font-face, et s’applique par le biais de feuille de style.
Ce besoin est destiné aux web designers soucieux d’utiliser une typographie personnalisée, ne dépendant d’aucune fonts installées sur le poste de l’internaute, puisées au sein de son système d’exploitation.
Cette pratique a été boudé car d’un simple coup d’oeil sur le fichier CSS, la police pouvait être télécharger et utiliser sans se soucier d’une quelconque licence d’utilisation.
.gif "@font-face")
Solution
L’utilisation de polices d’écriture libres de droit permet de résoudre ce boudage et le consortium du W3C en rajoute une couche en travaillant sur le format WOFF (Web Open Font Format) qui regroupe différents types de polices compressées (TrueType (TTF), OpenType, et Open Font Format), très bonne idée.
Google se penche aussi sur le sujet et vient de révéler un répertoire “on the cloud” de polices open source (libres de droit), accessible par n’importe quel développeur en rajoutant une simple ligne de code au sein de sa feuille de style et de l’entête de sa page :
– Code à placer dans la balise <head>
1 | <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'> |
– Code à insérer dans votre feuille de style
1 | h1 { font-family: 'Cantarell', arial, serif; } |
A savoir
- Un fichier de font fait en général entre 50 ko et 200 ko, son chargement au sein des pages de votre site n’est donc pas anodin car il coûte en temps d’affichage. Une police de caractères étant souvent composée de plusieurs fichiers de font, imaginez le poids que cela représente.
- Les polices “standards” utilisées actuellement sont optimisées pour le rendu à l’écran quelque soit le système d’exploitation et le type de lissage utilisé, la propriété @font-face ne garantit pas du tout ce résultat si la police utilisée n’est pas optimisée.
- Google prétend que les polices mises à disposition dans son répertoire de fonts sont optimisées, même pour l’ancêtre des navigateurs populaires Internet Explorer 6. Il prétend même qu’elles prennent en charge les options de style de CSS3 (rotation, ombrages…).
Well, article diggué 🙂
Des jeux de caractères libres et légers vont pouvoir apparaître et nos sites Web vont prendre un coup de neuf !
Article intéressant : Google fonts, tests de lisibilité.