Aujourd’hui je vais aborder un sujet qui intéresse tous les webdesigners et web développeurs, à savoir la règle CSS @font-face.
En effet, cette règle CSS permet d’utiliser n’importe quelle font sur son site (à conditions d’avoir les droits d’utilisation de la font bien sûr).
Voici deux trois sites qui utilisent des typos personnalisées et le rendu est souvent sympa :
Vonnda
Je vais à présent vous expliquer comment je m’en sers.
1) Choisissez la typographie qui vous intéresse.
2) Rendez vous à cette adresse : FontSquirrel Fontface Generator
3) Ajoutez votre typo comme sur l’image ci-dessous
4) Téléchargez votre webfontkit.
5) J’ai pour habitude de classer les dossiers de mon site comme suit : les fichiers html à la racine, un dossier fonts (pour mes typos persos), un dossier img (pour mes images), un dossier css (pour mes fichiers CSS). Si vous utilisez cette hiérarchisation, vous pouvez vous servir du code qui va suivre pour atteindre les typos avec le chemin relatif donné dans le css sinon à vous de modifier simplement le chemin.
6) Ajoutez ce code à votre fichier .css :
/* code CSS à inclure pour la typo */
@font-face{
font-family: "lenomquevousvoulezdonneravotretypo";
src: url("../fonts/nomdufichier.eot"); /* le ../ permet de revenir à
la racine et ensuite fonts/ pour rentrer dans le dossier des typos */
src: local("@"),url("../fonts/nomdufichier.ttf") format("opentype");
}
7) Vous pouvez ensuite vous servir de votre typo de cette façon dans votre css :
h1 {
font-family : 'lenomquevousvoulezdonneravotretypo';
}
Voici en bonus une petite extension pour navigateur internet qui permet de savoir quelle font est utilisée sur un site (vraiment utile).
Son nom : What Font
Vous la trouverez ici : WhatFont
Vous l’ajoutez en favoris et pour vous en servir sur un site vous cliquez dessus et vous survolez le texte dont vous voulez connaître la typo.