Vous êtes en train de développer un site, une application web et vous cherchez à intégrer dans vos design des polices (des fonts) qui ne sont pas pris en compte par la majorité des PC/MAC de vos utilisateurs. 

Une solution est possible : Utilisez la propriété CSS @font-face .

@font-... quoi ? 

@font-face est une propriété initialement prévu pour CSS3 mais qui peut être utilisé en CSS2.

Quelle est l'utilité de cette classe ? 

Cette propriété permet d'intégrer des polices non-système à vos sites (blog/application/...) lors de l'intégration de la feuille de style. 

Pour retrouver la liste des polices système, je vous invite à consulter ce lien : www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Comment fonctionne @font-face ? 

Pour commencer, il faut choisir la police non-système que l'on désire insérer dans sa page web. 

Ensuite, il suffit de déclarer la nouvelle police dans votre feuille de style en utilisant ce type de code : 

@font-face { font-family: "Ma_police_speciale"; 
src: url('Ma_police_speciale.ttf'); } 

Enfin, choisissez ce nom de police pour l'élément que vous désirez : 

p { font-family: Ma_police_speciale; }

Dans ce cas, tous les paragraphes auront la police "Ma_police_speciale".

Problème de compatibilité de @font-face

Dans un monde idyllique, tous les navigateurs et les systèmes d'exploitations interpréteraient ce code correctement. 

Mais nous ne sommes pas dans ce monde et il faut donc des adaptations et des fichiers différents suivant l'environnement où nous consultons le site. 

Il existe cependant une solution à ce problème de compatibilité. En effet, afin de pouvoir rendre visible cette police sur la majorité des environnements, on va étoffer la déclaration @font-face vu précédemment : 

@font-face { font-family: 'Ma_police_speciale';
    src: url('Ma_police_speciale.eot');
    src: url('Ma_police_speciale.eot?#iefix') format('embedded-opentype'),
         url('Ma_police_speciale.woff') format('woff'),
         url('fMa_police_speciale.ttf') format('truetype'),
         url('Ma_police_speciale.svg#Ma_police_speciale') format('svg');

En ajoutant ces quelques lignes supplémentaires, on règle le problème sur les navigateurs IE et l'environnement mac.

On remarque qu'en plus de notre fichier .ttf que nous avions précédemment, les fichiers .eot, .woff et .svg ont été ajoutés. 

Le problème est de savoir comment faire pour créer ces trois fichiers, car la possibilité de trouver une police avec 4 extensions de fichiers différents réduits considérablement le nombre de police que l'on peut choisir. 

Convertir son fichier source en différents formats

Heureusement pour nous, le site Fontsquirrel.com a créé un générateur de font-face. 

Le principe : On lui donne un fichier de police (qu'importe le format .ttf, .eot, ...) et li génère les fichiers avec les quatre extensions ainsi qu'un code html permettant d'intégrer la police générée dans son fichier css. 

Le lien vers @font-face generator : www.fontsquirrel.com/fontface/generator

Limite de cette méthode 

Un seul problème à cette méthode : Le fichier police est chargé lorsque la page se charge. 

De ce fait, le chargement peut être légèrement plus long qu'une page normale.