Ce billet est en quelques sortes une réaction suite à un article lu sur le célèbre blog Presse-Citron (qui date quand même d’il y a deux ans mais on me pose encore souvent la question …).

Lors de la conception de pages Web que ce soit pour votre site perso ou celui de votre entreprise, bien souvent, vous en avez marre de voir encore et toujours les même styles d’écritures « basiques » pour vos titres. D’ailleurs, je me trouve également dans ce cas.

Voulant donner une meilleure gueule à mes pages, j’ai donc commencé une longue recherche sur une façon qui pouvait conduire à de nouveaux styles pour mes titres. Je suis d’abord tombé sur l’option « titre en image » mais je dois avouer que l’idée de devoir ouvrir Photoshop à chaque fois que je crée une page m’a quelque peu effrayé.

J’ai donc continué à chercher et je suis tombé sur un petit script JavaScript/PHP très sympa : FaceLift.

La configuration et l’installation sont, de plus, très simple ! Pour le téléchargement, cela se passe du coté de son site officiel, sur la page Downloads.

- Configuration et installation.

Pour commencer, uploadez vos fichiers .TTF dans le dossier « fonts » du répertoire d’installation de FaceLift. Ensuite, ouvrez avec votre éditeur préféré le fichier config-flir.php.

Repérez l’endroit où sont déclarés les autres fichiers de fontes (vers la ligne 40 – 41), puis procédez de façon analogue pour ajouter vos polices :

<?php
$fonts['votre_police'] = 'votre_fichier_font.ttf';
?>

Ensuite, vous n’aurez qu’a spécifier « votre_police » dans la propriété font-family de votre CSS pour l’élément que vous souhaitez remplacer.

Ajoutez maintenant le script comme un script javascript classique dans les en-têtes de vos pages HTML puis, juste avant la fermeture de la balise body, lancez la procédure de remplacement :

Note : Pensez à remplacer /repertoire/dinstallation/facelift/ par le chemin vers le répertoire d’installation de FaceLift (où se trouve le fichier generate.php) ainsi que h2 par l’élément que vous souhaitez remplacer.

Voila ^^
Nico .