J’ai souvent cherché à mettre une police perso sur une page pour des boutons, des menus par exemple ou certains titres. Ce n’est malheureusement pas possible sur l’ensemble des navigateurs à moins de manipulations lourdes et complexes. En revanche, des petits outils bien pratiques comme typeface permettent d’inclure des polices persos. Attention : à utiliser avec parcimonie et retenue!
Il faut savoir que l’utilisation de polices personalisées peut être lourde pour un navigateur. En effet, celui-ci a tendance à charger beaucoup trop d’informations. Typeface, de son coté, ne va charger aucune police mais va juste convertir un fichier .ttf au préalable. Voici le mode d’emploi :
Trouvez votre police
Tout le monde connait dafont? Non? http://www.dafont.com est le meilleur allié de qui cherche une police gratuite et libre de droits. Une fois que vous avez trouvé votre bonheur, téléchargez votre police et extrayez-en le .tff correspondant. Pour ma part j’ai jeté mon dévolu pour http://www.dafont.com/fr/sega.font : SEGA.TTF
Téléchargement de typeface et conversion de la police
la première étape consiste à télécharger la bibliothèque typeface-0.15.js : http://typeface.neocracy.org/typeface-0.15.js
Maintenant que c’est fait, il va falloir convertir la police. Je m’explique : typeface ne va pas charger une police pour l’utiliser à la volée à chaque fois qu’un internaute charge votre page; Il faut convertir votre police en un fichier javascript à cette adresse : http://typeface.neocracy.org/fonts.html. Vous obtenez dans mon exemple le fichier sega_logo_font_regular.typeface.js
Construction de la page
Il y a deux écoles : soit vous incluez vos scripts dans les en-tête de la page entre les balises <head> et </head> :
<head> <script src="[CHEMIN]/typeface-0.15.js"></script> <script src="[CHEMIN]/sega_logo_font_regular.typeface.js"></script> </head>
Ou alors directement dans le corps de la page :
<script src="[CHEMIN]/typeface-0.15.js"></script> <script src="[CHEMIN]/sega_logo_font_regular.typeface.js"></script>
Le premier qui choisit la seconde solution sera maudit sur quinze générations. Bon, dans l’exemple plus bas je l’ai fait, maisce n’est pas pareil, c’était juste pour l’exemple!
Maintenant que vous avez inclus vos bibliothèques / fichiers de police, vous pouvez passer à l’utilisation proprement dite :
<div class="typeface-js" style="font-family: SEGA LOGO FONT; font-size: 70px;"> kicoes blog </div>
Maintenant vous vous demandez où je suis allé piocher le nom de la police. Et bien je suis allé éditer le fichier résultant de la conversion de ma police, sega_logo_font_regular.typeface.js. Dedans, je suis allé chercher le paramètre full_font_name, et j’ai trouvé :
"full_font_name":"SEGA LOGO FONT"
Il faut bien veiller à conserver la classe utilisée (class= »typeface-js »). Si vous souhaitez en utiliser d’autres, c’est possible en les séparant par un espace. Voilà le résultat :