1) FONTSQUIRREL
Le solution que j’ai adopté maintenant et très facile d’utilisation.
Il faut se rendre sur le site officiel www.fontsquirrel.com et générer via le petit générateur la police que l’on souhaite afficher sur son site web. (laisser les options par défaut).
Le générateur va nous générer quelques fichiers dont :
mapolice.woff
mapolice.ttf
mapolice.svg
mapolice.eot
Il suffit ensuite de copier les lignes dans le stylesheet.css et les mettre dans notre feuille de style (en veillant à indiquer le bon chemin vers notre police) :
@font-face {
font-family: 'mapolice';
src: url('mapolice.eot');
src: url('mapolice.eot?#iefix') format('embedded-opentype'),
url('mapolice.woff') format('woff'),
url('mapolice.ttf') format('truetype'),
url('mapolice.svg#mapolice') format('svg');
font-weight: normal;
font-style: normal;
}
et pour utiliser cette police sur un titre par exemple il suffit par exemple de créer une class et attribuer cette class à l’élément que l’on souhaite :
.ma-police { font-family:"mapolice"}
<h1 class="mapolice">Un belle police</h1>
2) CUFON
Cufón est une solution alternative pour afficher des polices peu courantes sur votre site internet, fini les titres en images !
Le site génère en ligne un javascript avec la police que vous avez choisie (différentes options sont possibles ce qui permet au final de réduire pas mal le poids du script), vous pouvez intégrer autant de polices souhaitées sur un même site.
Voici un exemple d’intégration :
Tous les éléments affectés de la classe .fontTrajan seront de la police TRAJAN.
<html>
<body>
<head>
<script src="Scripts/cufon.js" type="text/javascript"></script> // fichier commun
<script src="Scripts/TRAJAN.font.js" type="text/javascript"></script> //fichier généré avec votre police
<script type="text/javascript"> // déclaration de la class .fontTrajan
Cufon.replace('.fontTrajan', { fontFamily: 'Trajan Pro' });
</script>
</head>
<body>
<h1 class="fontTrajan">Titre en police TRAJAN</h1>
<p class="fontTrajan">paragraphe en police TRAJAN</p>
</body>
</html>
