la règle CSS @font-face permet d'utiliser des familles de police non standards. Ces polices seront  hébergées sur notre site web et nous ne seront ainsi plus limités par celles présentes sur la machine de l'internaute.

Pour utiliser une font original, il suffit de faire son marché sur l'un des sites proposant des polices libres de droit tels que http://www.dafont.com/fr/

Choisissez une police (disons qu'elle s'appelle MaNouvelleFont), puis d'utiliser l'utilitaire de fontsquirrel, qui va vous générer un kit pour la police prêt à l'emploi (ce kit comprend la police au format adapté pour chaque navigateurs)

Téléchargez ce kit, et copiez le dans un répertoire de votre site que je nomme ici font

Enfin, dans votre feuille de style, rajoutez maintenant la déclarationde votre nouvelle police de nom MaNouvelleFont (remplacez MaNouvelleFont par le nom de votre police

Dans votre fichier CSS :

Déclaration de la nouvelle police présente dans le répertoire font, puis appel à cette nouvelle police via la propriété font-family

/* ---------- fonts ---------- */
@font-face {
    font-family: 'NomDeMaNouvelleFont';
    src: url('font/MaNouvelleFont.eot');
    src: url('font/MaNouvelleFont.eot?#iefix') format('embedded-opentype'),
         url('font/MaNouvelleFont.woff') format('woff'),
         url('font/MaNouvelleFont.ttf') format('truetype'),
         url('font/MaNouvelleFont.svg#MaNouvelleFont') format('svg');
    font-weight: normal;
    font-style: normal;

}
body
{  font-family: NomDeMaNouvelleFont,Times,serif;}


J'avoue que depuis que j'ai découvert Google Web font, j'utilise de préférence leur service voir le mémo dédié à Google Web Font.

 

 

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.