Utiliser cufón
Les principes
Les polices génériques
Pour avoir une page web qui affiche les mêmes police de caractères sur tous les navigateurs et toutes les plateformes (Windows, Mac et Linux), nous devons utiliser les familles de polices génériques :
- Verdana, Arial, Helvetica et sans-serif
- Georgia, Times New Roman, Times et serif
- Courier New, Courier et mono
Via la règle font-family :
.texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Cela bride un peu la créativité typographique.
Utiliser du JavaScript
Pour utiliser presque n'importe quelle police de caractères dans nos sites, nous pouvons utiliser un fichier JavaScript qui va contenir la description vectorielle de la police à utiliser.
Si le JavaScript est désactivé dans le navigateur du visiteur, la police utilisée sera alors celle déclarée dans la feuille de style CSS de la page. Donc l'utilisateur verra de doute façon le texte, avec la police de remplacement ou pas.
Utiliser cufón
Les polices utilisables
cufón permet de vectoriser les polices aux formats : TTF, OTF et PFB, ces polices devant être libre de droit et utilisable sans restriction.
Choisir la police à vectoriser
Allez sur le site de cufón : http://cufon.shoqolate.com/generate/
Dans la zone Select the font you'd like to use,, cliquez sur le bouton Choisir le fichier, pour sélectionner le fichier de police à vectoriser. Attention de bien choisir le bon bouton pour le bon style de police&nbps;: Regular, Bold, Italic...
Dans cet exemple j'ai choisi la police Raspoutine Classic. Attention notez bien le nom de la police de caractère utilisée, nous en aurons besoin par la suite.
Cochez bien l'option The EULAs of these fonts allow Web Embedding (without Adobe Flash).
Choisir les glyphes
Dans la zone Include the following glyphs (if available), vous pouvez choisir quels glyphes, quels caractères vous souhaitez vectoriser. Plus vous vectorisez de caractères, plus le poids sera important.
Limitation du domaine d'application
Dans la zone Security, vous pouvez limiter l'application de la police à un nom de domaine.
Performance et taille de fichier
Dans la zone Performance & file size, vous pouvez choisir l'échelle typographique et inclure ou pas les tables d'approches.
Accepter la licence
Dans la zone Terms, cocher l'option I acknowledge and accept these terms.
Générer le fichier JavaScript
Cliquez sur le bouton Let's do this !
Le site cufón génère le fichier JavaScript et vous le télécharge aussitôt sur votre machine : Raspoutine_Classic_italic_400.font.js, dans cet exemple
Utiliser la librairie JavaScript
Télécharger la librairie cufón
Faites un clic avec le bouton droit de votre souris sur le bouron Download pour enregistrer le fichier JavaScript dans le dossier de votre site.
Vous pouvez aussi afficher tout le code JavaScript de la librairie en cliquant sur le bouton Download.
Installer la librairie
Dans la page HTML qui doit utiliser cufón, vous devez impérativement insérer le lien vers le fichier JavaScript juste avant le </body>.
<script type="text/javascript" src="/cufon-yui.js"><script>
</body>
Intégration des polices
Vous devez maintenant créer les liens vers le(s) fichier(s) JavaScript des polices vectorisées, toujours avant la fin du body.
<script type="text/javascript" src="/cufon-yui.js"></script>
<script type="text/javascript" src="/Raspoutine_Classic_italic_400.font.js"></script>
</body>
Remplacement des polices
L'objectif est de remplacer les polices génériques pour tel ou tel style CSS. Nous allons utiliser la méthode Cufon.replace en ciblant le bon sélecteur CSS. Comme précédemment, il faut placer ce code avant la fin du body :
Terminer par la méthode Cufon.now() pour appliquer le remplacement des polices.
<script type="text/javascript" src="/cufon-yui.js"></script>
<script type="text/javascript" src="/Raspoutine_Classic_italic_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1.titre', {fontFamily:'Raspoutine Classic'});
Cufon.replace('h2.titre', {fontFamily:'Raspoutine Classic'});
Cofun.now()
</script>
</body>
Dans cet exemple les styles remplacés seront h1.titre et h2.titre
Utiliser les styles
Maintenant dans votre page HTML, insérez des éléments utilisant les sélecteurs utilisés dans le remplacement : h1.titre (<h1 class="titre">) et h2.titre (<h2 class="titre">) dans cet exemple.
