Comment intégrer une font non standard sur un site web -

Programmation admin 2 septembre 2010 1 Commentaires

Comment intégrer une font non standard sur un site web

Le web ne nous propose que peu de polices (ou font) standard et reconnues de tous.
Je citerais par exemple les plus utilisées comme le verdana ou l’arial. Mis à part ça, si la police n’est pas installée sur la machine du visiteur, on court à la catastrophe !!!

Alors pourquoi prendre un tel risque et comment le résoudre ?

Tout d’abord, l’intérêt pour sortir du lot avec son site est de pouvoir justement améliorer l’impact visuel d’un texte commercial ou non.
Alors la solution de facilité pour le plus grand nombre était tout simplement de coller une image du titre avec la police souhaitée. Mais cette méthode est extrêmement lourde et de plus, elle n’est pas du tout adaptée à des articles dont le texte est dynamique !!!
De plus, si l’internaute change la taille de la police, cela risque fortement de créer un décalage et donc d’avoir un rendu très très moche!

Avec l’arrivée de plus en plus croissante des smart-phones allant sur internet, cette méthode est de plus bien trop lourde pour afficher des pages sur ce type de téléphones.

Après plusieurs heures de recherches et de tests sur différents navigateurs (firefox, internet explorer, opera, safari …), voici une solution qui permet d’injecter directement une police chez le client alors qu’elle n’est pas installée sur son pc.
Nous allons pour cela utiliser du CSS v3 donc à mettre dans votre feuille de style :

Copy Code


@font-face {
font-family: 'MagistralCBold'; src: url('../images/font/magistralc-bold-webfont.eot'); src: local('?'), url('../images/font/magistralc-bold-webfont.woff') format('woff'), url('../images/font/magistralc-bold-webfont.ttf') format('truetype'), url('../images/font/magistralc-bold-webfont.svg#webfontimZJCihR') format('svg');
font-weight: normal; font-style: normal;
}

Le tag font-family permet de définir le nom de la police; vous l’appellerez ainsi sur le reste de votre feuille de style.
Le reste consiste en des liens vers différents formats de la police afin qu’elle soit lue par tout type de système d’exploitation.

Voici quelques liens pour vous aider à la conversion de votre police au format ttf aux autres formats: