La propriété css3 "@font-face"

IL est désormais possible avec CCS3 d'intégré une police "non système" sur votre site web !

Pour cela vous devez avoir votre police sous différent format (ttf, eot, svg, woff), aussi pour convertir votre police, rendez-vous sur le site http://www.fontsquirrel.com/, rubrique "@font-face generator".

Celui-ci vous permettra de télécharger votre "Kit" de polices et la feuille de style attachée.

Il vous suffira de dézipper le fichier télécharger dans un répertoire de votre site, copier le code CSS de la feuille de style et le coller dans vos pages.

CODE CSS

@font-face {
font-family: mapolice;
src: url('goodgirl-webfont.eot');
src: url('goodgirl-webfont.eot?#iefix') format('embedded-opentype'), url('goodgirl-webfont.woff') format('woff'), url('goodgirl-webfont.ttf') format('truetype'), url('goodgirl-webfont.svg#GoodGirlRegular') format('svg');
font-weight: normal;
font-style: normal;
}

N'oubliez pas de rectifier le chemin de votre dossier ou sont stokés les polices !

J'ai converti la police nommée "Goodgirl", mais éventuellement, vous pouvez la renommer (en jaune dans le code ci-dessus).

Ensuite, créer votre classe, dans cet exemple :

.Ma_Police {
font-family:mapolice;
font-size:5em;
text-align:center;
color:#0471b4;
}

Résultat :

Ma police

Certaine polices pèsent lourd, veillez à ne pas allourdir votre site de façon excessive !