Toutes les polices sur un site Web


AV_dafont_backgr

Oyez, oyez, braves gens, damoiselles et damoiseaux… Troubadours, faites rugir les trompettes, les tambours et autres luths, pour fêter l’arrivée de ce Post qui va vous permettre d’utiliser n’importe quelle police sur votre site Web (TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts). Vos visiteurs n’auront pas besoins d’avoir cette police installée sur leur poste pour voir cette dernière. Ceci est rendu possible grâce à Cufón (Découvert grâce à POULPI) et nous allons voir comment l’implémenter sur votre site web.

Ce dont vous avez besoin :

Installation :

A la racine de votre répertoire web créer un dossier « js » et placez y le fichier « cufon-yui.js ». Rendez-vous sur le  site de Cufón (ici) et suivez la marche à suivre.

Ouvrir votre police et cocher la case « The EULA of these fonts allow Web Embedding » :

capture1

capture2

Sélectionner ce dont vous avez besoin dans la partie « Include the following glyphs » :

Capture3

Pour le reste sélectionner ce dont vous avez besoin, accepter les termes en cochant la case « I acknowledge and accept these terms » et valider via le bouton « Let’s do this! » :

Capture4

Attendre la fin du transfert et votre fichier va être télécharger :

Capture5

Voila, il ne reste plus qu’à ajouter quelques lignes dans vos différents fichiers HTML. Dans la balise <head> insérer ces lignes correspondant aux fichiers js Cufon de vos polices et leurs emplacement :

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Sinhala_MN_400.font.js" type="text/javascript"></script>
<script src="js/Minion_Pro_400.font.js" type="text/javascript"></script>

Avant la fermeture de la balise </head> insérer le script suivant :

<script type="text/javascript">
   Cufon.replace('h1', { fontFamily: 'Sinhala MN' });
   Cufon.replace('#smenu li a', { fontFamily: 'Minion Pro' });
</script>

Pour finir il faut insérer ceci, pour des soucis dans IE, avant de fermer la balise </body> :

<script type="text/javascript"> Cufon.now(); </script>

En gros vos fichiers HTML doivent ressembler à ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                   <script src="js/cufon-yui.js" type="text/javascript"></script>
                   <script src="js/Sinhala_MN_400.font.js" type="text/javascript"></script>
                   <script src="js/Minion_Pro_400.font.js" type="text/javascript"></script>
                   <script type="text/javascript">
                         Cufon.replace('h1', { fontFamily: 'Sinhala MN' }); 
                         Cufon.replace('#smenu li a', { fontFamily: 'Minion Pro' });
                   </script>
     </head> 
     <body>
                   <h1>This text will be shown in Sinhala.</h1> 
                   <div id="smenu">
                          <ul>
                               <li><a href="#">blabla</a></li>
                          </ul>
                   </div>
                  <script type="text/javascript"> Cufon.now(); </script>
     </body> 
</html>

C’est terminé, vous disposez dès à présent de vos polices visibles par tout le monde.

Si vous avez aimé cet article n’hésitez pas à cliquer sur j’aime ou à le partager grâce aux boutons ci-dessous :

Publicités

Une réflexion au sujet de « Toutes les polices sur un site Web »

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s