Utiliser des polices “exotiques” sur un site web methode 2 : FLIR

FLIR, la méthode PHP

Le mois dernier je vous présentais sIFR comme méthode de remplacement des polices. Basée sur un fichier swf (Flash), cette méthode consomme de la bande passante et par expérience ne fonctionne que de façon aléatoire.

Je vous propose aujourd’hui une autre méthode qui fonctionne coté serveur avec PHP. C’est une méthode beaucoup plus souple et plus simple à mettre en œuvre. C’est la méthode que j’ai expérimenté sur ce blog :

FLIR : la méthode PHP

FLIR utilise la librairie GD de PHP pour générer le texte. La police est générée dynamiquement en utilisant les styles CSS.

La première chose à faire est de télécharger la dernière version de FLIR. Décompresser le dossier et envoyer les fichiers sur votre serveur là où vous le souhaitez. Je les ai placé à la racine de mon serveur dans un dossier nommé script.

Ouvrez la page où vous souhaitez intégrer FLIR et insérer ceci dans le pied de page avant la balise fermante body :


<script src="script/flir.js" type="text/javascript"></script>
<script type="text/javascript">
	FLIR.init();
	FLIR.auto();
</script>
</body>

Configurer les polices

J’ai choisi d’utiliser les polices Anivers, Delicious et Fontin pour cet exemple. Téléchargez-les et placez les dans le dossier fonts à l’intérieur du dossier script.

Il faut maintenant configurer le fichier config-flir.php. A la ligne 40 vous trouverez quelque chose comme ca :

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
$fonts['okolaks'] 		= 'okolaksBold.ttf';
$fonts['wanta'] 			= 'wanta_091.ttf';

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['okolaks'];

Comme vous l’aurez compris, chaque entrée du tableau $fonts est une police du dossier fonts.
Les noms entre crochet (['illuminating']) est le nom que nous allons utiliser dans le fichier CSS. Modifions notre fichier avec nos polices :

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['anivers'] 	= 'Anivers_Regular.otf';
$fonts['fontin'] 		= 'Fontin-Regular.ttf';
$fonts['delicious'] 			= 'Delicious-Roman.otf';

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['anivers'];

La police Anivers sera la police utilisée par défaut si aucune police n’est spécifiée.

La partie CSS

Par défaut, FLIR remplace vos éléments titre . Pour spécifier des élément en particulier il suffit de rajouter ceci à la fonction FLIR.auto() dans le pied de page :

FLIR.auto([ 'h4, h2.titre, div.commentaires h3']);

Dans la feuille de style, on déclare la propriété font-family comme avant, sauf que maintenant on peu utiliser les polices choisie :

h4 {font-family: delicious, Georgia, serif;}
h2.titre {font-family: anivers,Arial,sans-serif;}
div.commentaires h3 {font-family: fontin, Verdana, sans-serif;}

Vous pouvez stylez vos textes comme bon vous semble, agir sur la couleur, la taille, la graisse, l’espacement des caractères,… sauf la propriété text-transform

Et voici un exemple de texte avec FLIR

Et voilà, en quelques manipulation on intègre la police que l’on veut facilement. C’est totalement transparent pour le visiteur.

L’avantage de FLIR par rapport à sIFR c’est qu’il n’utilise pas flash. Aucun plugin n’est nécéssaire pour voir le texte s’afficher correctement.

FLIR et sIFR sont les 2 méthodes les plus connues, mais il en existe d’autre encore. ~~Prochaine méthode : Typeface.js, cette fois on enlève le PHP, uniquement HTML/CSS et javascript. Je n’ai pas encore testé mais je vous en reparle bientôt…~~

[mise à jour du 09/11/2008] : Voir la méthode Typeface.js

Articles sur le sujet :

subscribe to my RSS feed

22 commentaires

Daerid 8 décembre 2008 à 15:59

Je cherchais justement si une méthode de ce genre était possible il y a une poignée de jours., ça tombe à point nommé !

L’article est précis et complet et je serai prêt à tester la méthode MAIS … Qu’en est-il du contenu par les moteurs de recherche ?
Est-ce que tu as eu des retours favorables à ce sujet ?

Je me méfie toujours des scripts en javascript

Si tu as une réponse à ce sujet (que j’attends avec impatience !), ça complèterait parfaitement ton sujet qui aurait à mon avis sa place dans une newsletter telle que celle de Secret 2 Moteurs.
Deborah 11 décembre 2008 à 23:02

Et bien Daerid, si tu regarde un peu le code source de ce blog, tu verras que le texte est toujours du texte, même si FLIR utilise la librairie GD de PHP et renvoie une image.

C’est une solution totalement transparente pour les internautes comme pour les moteurs de recherche.

En ce qui concerne le javascript, le faible pourcentage d’internautes qui n’active pas le javascript verront le texte s’afficher avec les polices alternatives que tu aura défini dans la feuille de style.

Testé et approuvé
Daerid 17 décembre 2008 à 15:07

Excellent, je vais tenter la technique.

Merci Miss Débo et longue vie à ton blog

(Je vais même te blogrolliser rien que pour cet article ; si jamais ça ne te convient pas, n’hésite pas à me contacter ^_^)
Deborah 8 janvier 2009 à 23:04

Merci beaucoup Daerid pour le lien.
J’aimerais apporter quelques précisions à ma réponse.

Il y a quelque temps, un visiteur m’a demandé de l’aide pour mettre en place sIFR sur son site (http://www.frank-kappa.com/work/).
J’ai lutté pour arriver à le faire fonctionner. J’ai tenté avec FLIR sans plus grand succès. Je n’ai pas encore très bien compris pourquoi cette dernière méthode n’a pas fonctionné (d’autant plus qu’elle fonctionne très bien ici). Mais j’ai tout de même trouver le problème avec sIFR : il faut nécessairement transférer les fichiers sur un serveur distant (ça ne fonctionne pas en local).

Prudence donc avec ces solutions qui fonctionnent plutôt bien mais qui je pense manquent encore un peu de perfectionnement. Quoique bientôt, avec la futur génération de navigateur, on pourra embarquer directement nos polices sans aucune manip particulière.
sebastien 29 janvier 2009 à 1:53

J’utilse cette methode. C’est nickel sous ff mais sous ie ça fait comme si l’image manquait : un carré blanc avec une croix rouge dedans… comment ça se fait d’après toi ?
Deborah 30 janvier 2009 à 20:41

Je suppose que tu parles de ie 7, il faudrait que je me penche sur la question… Je reviens vers toi dès que j’en sais plus.
thierry 23 août 2009 à 15:39

Bonjour

J’ai suivi la procédure minutieusement et malgré cela, la police désirée n’apparaît pas.

Dans Firebug, lorsque je sélectionne mon titre, il ne trouve pas le chemin qui lui permet de pointer vers l’image créée.

Le fichier “flir.js” et mon fichier CSS sont bien chargés.

A noter : je réalise un test sur un serveur local. Est-ce dû à cela ?

Merci
thierry 23 août 2009 à 15:49

Je reviens vers vous pour d’autres précisions.

j’ai adopté la même arborescence que vous : script/flir.js…

Lorsque, je regarde le chemin de la source du titre, il manque le répertoire “script”.

A la place, j’ai : scr=”generate.php?text=Police&h=37…”

Comme vous pouvez le constater, il manque le dossier “script” qui doit précéder “generate.php…”.

Pourquoi ?
Deborah 23 août 2009 à 20:03

Je me suis arraché les cheveux une fois sur ce problème et il semblerait que flir ne fonctionne pas en local, il faut nécessairement que les fichiers soit sur un serveur distant.
Emeric 2 septembre 2009 à 10:19

Merci pour le tuto! C’est simple, beau et facile! Juste une remarque (pour les utilisateurs de demain), j’ai du spécifier le chemin d’accès de “generate.php” dans la balise script du pied de page pour que ça fonctionne!

FLIR.init({ path: ‘/scripts/generate.php/’ });
Emeric 2 septembre 2009 à 10:21

PS: Je suis en local (MAMP) et ça marche très bien avec mon astuce
Emeric 2 septembre 2009 à 10:31

PS2: Pour éviter les explosions de bande passante, pensez à ajoutez des headers Expire dans votre htaccess! Je pense que FLIR peut-être très vite très gourant

“Avec mod_expires configuré, quand le serveur envoie une image au client, il lui précise que cette image est « valable» pour les 15 prochains jours (par exemple). Le client ne demandera donc plus l’image pendant 15 jours. Si le client lit 100 pages sur les 15 prochains jours, une image de 10ko coûtera 1Mo de bande passante sans expires, 10 ko avec expires.”

C’est très bien expliqué ici : http://www.malaiac.net/465-optimisation-wordpress.html
Armel 13 janvier 2010 à 9:51

Merci pour ce super tuto. c’est très simple et pratique. je peux t’avouer que c’est ma première expérience d’utiliser les fonts dans un site.

Ce qui me reste encore à tester, c’est voir si je peux l’utiliser avec Joomla sans problème, car j’ai un menu déroulant à faire avec une police exotique. je vous ferais signe
Alex 14 janvier 2010 à 22:31

Bonsoir !

Très bien ces tutos! J’ai testé Flir et Typeface.
Dommage que Typeface n’accepte pas les tailles relatives en effet !
Par contre Flir n’est pas totalement au point… Pour certaines polices, si certaines lettres prennent plus d’espace que d’autres en largeur, alors la lettre d’à côté est rognée… dommage (avec Jellyka Estrya’s Handwriting par exemple…). En jouant avec l’écartement des lettres ça compense le problème mais les accents ne sont plus pris en compte

Bonne continuation
Pierre 24 janvier 2010 à 20:03

Bonsoir

Merci d’abord pour la clarté et la simplicité de ce tuto.

Je rencontre le problème suivant :
- en local
- avec EASYPHP

1/- si je ne suis pas le conseil d’Emeric 2 :
- sous Firefox, le titre Bienvenue reste dans le fonte de base
- sous IE6, idem, avec l’éternelle petite croix rouge quand une image n’est pas trouvé
- et je n’ai aucune image crée dans le dossier cache

2/- si au contraire je suis le conseil d’Emeric 2 :
- j’ai bien des images crées dans le dossier cache,
- mais toujours aucun affichage ni sous IE6 ni sous Firefox

Auriez-vous une piste

Merci d’avance de votre aide.
Deborah 25 janvier 2010 à 14:29

Comme déjà dit auparavant, FLIR ne semble pas fonctionner correctement en local. Il faut nécéssairement tester le site sur un serveur distant.
Kevin 26 janvier 2010 à 13:46

Au taff, sur le serveur ca ne fonctionne pas, pas d’images, pas de croix rouge sous IE :S j’ai également tester SIFR mais ca ne veux toujours pas fonctionner :S

PS: Site non sous Wordpress
Kevin 26 janvier 2010 à 13:51

Bon désolé il faut finalement que je demande un coup de main sur un blog pour trouver la soluce :S
Mélanie 31 janvier 2010 à 16:41

Bonjour,

Je n’arrive pas à faire fonctionner facelift.

J’ai une page index.html dans laquelle j’ai inclus les éléments qu’il faut et modifié le fichier config. Mais rien ne fonctionne

Pouvez-vous m’aider ?
Marc 2 février 2010 à 13:14

Très bien ces tutoriaux sur la substitution de caratère !

J’ai essayé flir avec succès… mais comment gèrez-vous les retours à la ligne ?

Par exemple pour le titre de cet article ?

Lors de mes propres essais, le texte substitué est TOUJOURS sur une seule ligne quelle que soit la taille du bloc.

Merci de vos lumières
Deborah 2 février 2010 à 22:32

@Marc
Pour que le texte s’adapte, il vous faut utiliser le paramètre wrap comme indiqué dans la doc ici : http://facelift.mawhorter.net/doc/flir-js-flirstyle-object-mode.
Il faut alors écrire le code ainsi :
FLIR.init(); FLIR.replace( 'h1, h2' , new FLIRStyle({mode:'wrap' }) );
Bruce 19 mai 2010 à 22:17

PS2: Pour éviter les explosions de bande passante, pensez à ajoutez des headers Expire dans votre htaccess! Je pense que FLIR peut-être très vite très gourant

“Avec mod_expires configuré, quand le serveur envoie une image au client, il lui précise que cette image est « valable» pour les 15 prochains jours (par exemple). Le client ne demandera donc plus l’image pendant 15 jours. Si le client lit 100 pages sur les 15 prochains jours, une image de 10ko coûtera 1Mo de bande passante sans expires, 10 ko avec expires.”

C’est très bien expliqué ici : http://www.malaiac.net/465-optimisation-wordpress.html