le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

@font-face ou Comment choisir une police non standard

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.

 

 

publié le 10/12/2011 par Memo Web
Commenter le Mémo :

Rajouter une image en CSS avec la balise :before ou :after
Rajouter du texte dans un élement via CSS
Enlever la bordure qui apparaît au survol d'une image sur un lien hypertexte
Effet carnet de notes en CSS 3 - empilement de feuilles
Width à  100% avec padding : Lorsque l'élément est plus large que prévu
Utiliser des constantes dans un fichier CSS
Effet ruban sur un titre en CSS 3
Un joli titre sans image, tout en CSS
Quiz sur les mémos du CSS
Ombrage - propriété box-shadow
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos