Comment utiliser la police de votre choix grâce à Flir

Ce billet est une traduction | Parfois, on voudrait incorporer une police à son site mais malheureusement, que peu de polices sont affichables sur un site, mais à l’aide d’un petit script, vous pourrez désormais utiliser n’importe quelle police et surtout sans flash ! Alors préparez vous car il va falloir mettre les mains dans le code !

La premiere choses à faire, c’est de télécharger FLIR. Une fois le téléchargement terminé, dezippez le programme, et placez le sur votre serveur web. Ici, on le renomme juste “facelift” pour faciliter les choses.

Dans le fichier “facelift”, il y a un fichier Javascript nomée “flir.js”. Vous pouvez l’enlever, ou bien le déplacer vers un fichier où vous regrouperez tout vos fichier Javascript. Pour ce tutorial, on va juste faire ça, et le déplacer vers une fichier que vous appellerez “js”, et que vous placerez à la racine de votre site.

Maintenant, ouvrez “flir.js” dans votre éditeur de texte préféré et allez à la ligne 30. Il doit y avoir quelques choses comme ça :

,path: <span>''</span> 

Vous aurez besoin de placer l’endroit où se trouve facelift entre les guillemets.

,path: <span>'/dossier/vers/facelift/'

Toujours dans votre éditeur de texte, ouvrez la page où vous souhaiter introduire FLIR et ajouter la ligne de code suivante :

<span><</span><span>script</span> <span>src</span>=<span>"js/flir.js"</span> <span>type</span>=<span>"text/javascript"</span><span>></span><span></</span><span>script</span><span>></span>

Puis entre les balises script, ajoutez  :

FLIR.init();

FLIR.auto();

Ce qui donne : 

<span><</span><span>script</span> <span>type</span>=<span>"text/javascript"</span><span>></span>  

  FLIR.init();  
  FLIR.auto();  

<span></</span><span>script</span><span>></span>

ETAPE 2 : CHOISIR ET CONFIGURER LES POLICES

Cette étape est vraiment facile. Télécharger les polices que vous souhaiter utiliser sur, par exemple, DaFont. Ensuite, placer vos fonts dans le dossier “font” de votre dossier “facelift”. Ouvrez le fichier “config-flir.php” dans votre éditeur de texte, et vous apercevrez un bloc de texte qui doit ressembler à ça :

$fonts = array();
$fonts['tribalbenji']   = 'Tribal_Font.ttf';
$fonts['antagea']   = 'Antagea.ttf';
$fonts['illuminating']  = 'ArtOfIlluminating.ttf';
$fonts['bentham']   = 'Bentham.otf';
$fonts['geo']   = 'Geo_Oblique.otf';
$fonts['puritan']   = 'Puritan_Regular.otf';
$fonts['konstytucyja']  = 'Konstytucyja_1.ttf';
$fonts['promocyja']   = 'Promocyja.ttf';
$fonts['stunfilla']   = 'OPN_StunFillaWenkay.ttf';
$fonts['animaldings']   = 'Animal_Silhouette.ttf';

$fonts['default']   = $fonts['puritan'];

Si par exemple, je souhaite ajouter la police “Tallys”, je la place dans mon fichier font, et j’ajoute à la suite la ligne de code suivante :

<span>$fonts</span>[<span>'tallys'</span>] = <span>'Tallys_15.otf'</span>; 

Vous pouvez également assigner une police par défaut :

<span>$fonts</span>[<span>'default'</span>] = <span>$fonts</span>[<span>'deliciousheavy'</span>]; 

ETAPE 3 : STYLE

Maintenant, il vous faut spécifier les texte auquelles vous souhaiter appliquer le style :

FLIR.auto([ <span>'h1'</span>, <span>'h2'</span>, <span>'h3.alert'</span>, <span>'strong#important'</span> ]); 

Là, il va demander à FLIR d’appliquer le style aux texte suivants : h1, h2, h3 avec une classe “alert” et au texte en gras avec l’id “important”.
Maintenant, il faut appliquer tout ça dans le CSS :

h1 { <span>font-family</span>: ffftusj, Georgia, <span>serif</span>; }  
<div>h2 { <span>font-family</span>: deliciousheavy, <span>Arial</span>, <span>sans-serif</span>; }  </div>
h3.alert { <span>font-family</span>: tallys, <span>Arial</span>, <span>sans-serif</span>; } 

Et voilà, vous avez maintenant la police de votre choix sur votre site/blog :))

Billet original : NetTuts

Traduction : Neoskyzo