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 :

Utiliser des constantes dans un fichier CSS
Effet carnet de notes en CSS 3 - empilement de feuilles
Générer un fichier CSS en PHP
Comment utiliser une police google web font sur son site Internet
Quiz sur les mémos du CSS
Comment rajouter un séparateur entre les items d'une liste
Centrer une image horizontalement
Colorer une ligne sur 2 dans un tableau en CSS3
Aligner verticalement du texte avec une image
Arrondir les bords d'un élément
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