Blog

Nous avons vu dans un précédent post l'utilisation de la propriété @font-face pour l'emploi des polices exotiques. Cet article avait pour but de vous éclairer sur les différentes possibilités qui s'offrent à vous en matière de design des polices.

Commençons d'abord par un petit rappel. Une police exotique est donc une police qui n'est pas présente par défaut sur votre ordinateur. Cela implique qu'il faut l'y ajouter afin de pouvoir l'afficher sur un site. Nous avions alors abordé deux solutions qui étaient l'emploi de Cufon ou de @font-face. 

Illustrations d'une police standard et d'une police exotique

Dans ce nouvel article nous allons pousser plus en avant l'exploration de @font-face et voir comment contourner les problèmes que nous avions mis en avant précédemment, et plus particulièrement comment alléger le poids des fichiers de polices ou fonts. 

En effet, rappelons une fois encore que le principal défaut de @font-face était que cette propriété implique le téléchargement des différents fichiers propres à la police désirée. Il s'agit par exemple d'un fichier pour le gras, d'un autre pour l'italique, et ainsi de suite. L'effet non-désiré est donc l'augmentation du poids de la page et dès lors des temps de chargement.

Mais posons-nous la question, existe-t-il un moyen de contourner ce problème ou du moins de réduire les contraintes qu'il implique? La réponse est heureusement oui ! Comment allez-vous me dire? 

Et bien nous allons utiliser ce que nous appelons un CDN. Un CDN, pour Content Delivery Network, est un réseau d'ordinateurs qui permet de mettre du contenu à disposition d'un utilisateur et cela d'une manière quasi transparente.

Pour illuster le comportement du CDN nous allons l'illustrer par quelques exemples concrets. Vous pensez peut-être qu'il s'agit d'une nouvelle solution miracle mais il n'en est rien! Vous utilisez quotidiennement des CDN sans vous en rendre compte que ce soit lorsque vous téléchargez des fichiers sur les réseaux Peer to Peer comme le BitTorrent ou lorsque que vous regardez des vidéos en streaming.

Mais dans notre cas, en quoi cette solution peut réellement nous intéresser? La réponse est que le CDN va nous permettre d'accélérer le temps de chargement des fichiers volumineux sur l'ordinateur et donc le chargement sera nettement plus rapide. Cette solution est donc idéale dans notre cas car elle nous permet de gommer le principal défaut de la propriété @font-face.

Notre solution est donc toute trouvée, reste à la mettre en place! Pour cela nous disposons de plusieurs possibilités.

Première solution : je fais tout et seul... ou presque

Si l'envie vous en dit vous pouvez décider de mettre la solution exposée en place par vos propres moyens. Pour cela vous devez disposer au préalable des différents fichiers de police nécessaires et surtout d'un accès à un CDN.

Les sites suivants vous offrent des accès CDN  :

• Amazon CloudFront
• CDNetworks
• SimpleCDN
• ...

Une fois que vous disposez de votre accès et que vos fichiers sont présents sur le réseau, il vous suffit de reprende l'utilisation normale de @font-face abordée lors de l'article précédent et d'y ajouter le chemin d'accès ou URL vers le ou les différents fichiers.

@font-face{

    /*On donne un nom (au choix) à la police téléchargée */

    font-family: "NomDeLaPolice";

    /*On indique le chemin du fichier à télécharger sur le CDN*/

    src: url("url d'accès au CDN/police.otf");

}

h2.title{

    font-family: "NomDeLaPolice", Arial, sans-serif;

}

Comme on peut le voir, le code est strictement identique si ce n'est que la source du ficher se trouve sur le CDN. Cette méthode permet donc d'éviter le téléchargement et n'est pas si difficile que cela à mettre en place.

Deuxième possibilité : faire appel à une solution toute prête

Si l'idée de mettre en place la solution par vous même ne vous tente pas sachez qu'il existe une solution alternative. Celle-ci fournie, une fois n'est pas coutume, par Google.

En effet, Google et son API vous fournisse une solution dans laquelle les fichiers de police sont déjà présents sur leur CDN et il suffit de choisir la police désirée dans une liste prédéfinie et limitée.

Vous procédez donc de la manière suivante :

• Insérer la feuille de style issue de Google

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

• Appeler la police pour les éléments qui l'utilisent

h2 {

  font-family: 'Font Name', serif;

}

Ces deux instructions sont suffisantes pour bénéficier de la police exotique. Par ailleurs, vous pouvez retrouver l'ensemble des explications et des polices disponibles à l'adresse suivante :  http://code.google.com/webfonts

Conclusions

Finalement que faut-il retenir au terme de cet article?

Essentiellement deux choses, la première est que l'emploi de @font-face est appelé à se multiplier sur le net. L'implication de Google dans ce domaine ne fait que confirmer cette idée.

Ensuite, nous pouvons dire que l'emploi d'une méthode ou technique est rarement suffisante si elle n'est pas couplée avec d'autres éléments permettant de l'optimiser. @font-face en est un bon exemple, lorsque nous avons abordés cette méthode il nous était apparu qu'elle présentaient un gros point faible. Aujourd'hui, grâce au CDN, ce point faible a disparu. 

Pour finir, quelle méthode choisir? Tout cela dépend de vos besoins. En effet, la première solution n'implique pas de restrictions au niveau du choix de la police mais elle induit par contre un coup pour la location du CDN. La seconde solution, celle de Google, est par contre gratuite mais elle ne propose qu'un choix limité de polices. A vous donc de prendre la bonne décision en fonction des attentes de vos clients, des désirs de votre designer ou tout simplement de vos goûts.

Il ne vous reste, maintenant, qu'à laisser libre cours à votre créativité.