lundi , 18 novembre 2019
Comment afficher des fontes différentes sur votre site sans utiliser d'images ?

Polices différentes sur votre site !

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>
[Total : 0    Moyenne : 0/5]

A propos jeanluc

Check Also

Less css

Vous avez sûrement entendu parler de Less ou de Sass… Vous savez, c’est une espèce de langage dynamique qui vous permet de générer vos feuilles de style CSS.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *