Comment intégrer une police “non standard“ sur votre site ?

Rien de plus facile… avec @font-face vous avez la possibilité d’utiliser une police embarquée sur le serveur.

Il existe différents formats de polices :Logo CSS 3

.ttf : TrueType Font (Firefox, Chrome, Safari, Opera, IE9)

.otf : OpenType Font TrueType Font (Firefox, Chrome, Safari, Opera)

.eot : Embedded OpenType (IE)

.svg : SVG Font (Firefox, Chrome, Safari, Opera)

.woff : Web Open Font Format (Firefox, Chrome, Safari, Opera, IE9)

 

1ère étape : Obtenir touts les formats de votre police

Pour cela, il existe plusieurs sites sur le net qui vont vous faire tout le travail : Font Squirrel vous permettra de télécharger les différents formats de police mais aussi le code css.

2ème étape : Intégrer votre police avec la propriété css @font-face

Une fois tous les formats de police en votre possession, il suffit de les utiliser via le css de votre site. Pour cela, il est nécessaire de faire appel à la propriété css @font-face.

Exemple ici avec la police “NasalizationRegular“ :

@font-face {

   font-family: 'NasalizationRegular';

   src: url('/nasalization_rg-webfont.eot');

   src: url('/nasalization_rg-webfont.eot?#iefix') format('embedded-opentype'),

         url('nasalization_rg-webfont.woff') format('woff'),

         url('nasalization_rg-webfont.ttf') format('truetype'),

         url('nasalization_rg-webfont.svg#NasalizationRegular') format('svg');

   font-weight: normal;

   font-style: normal;

                }

Vous pouvez donc désormais utiliser n’importe quelle police pour votre site. Attention toutefois à ne pas en abuser, chaque police augmentera rapidement le poids de votre page.