!!!En cas de balcklisted utiliser ce lien : http://www.font2web.com/!!!

Intégrer une font dans son site web

Voici la procédure standard pour intégrer une nouvelle police dans son site web

On télécharge notre police sur Googlefont,  généralement un simple fichier ttf.(ou tout autre site dédié bien sur)

Pour que la police soit lisible sur tous les navigateurs, on va avoir besoin de convertir notre fichier en plusieurs format par défaut:Voici la liste des correspondances

design

 

on se rend sur font squirrel 

webfont

En cliquant sur “Add Fonts” on télécharge notre fichier  ttf, cela va automatiquement charger votre fichier .Cocher la case sur “Agreement”, laisser le bouton radio sur “optimal”.On clique ensuite sur “Download your kit” pour télécharger le dossier contenant notre police et toutes ses extensions.

design2

dans le dossier récupéré, on copie les 4 fichiers comme sur l’image suivante:

pole

et on va les mettre dans un dossier spécifique (généralement ‘font’) à la racine de notre site

font

 

Ensuite, reste plus qu’à appeler notre police depuis notre fichier css

@font-face {
	    font-family: 'ubuntu-r-webfont';
	    src: url('fonts/ubuntu-r-webfont.eot');
	    src: url('fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
	         url('fonts/ubuntu-r-webfont.woff') format('woff'),
	         url('fonts/ubuntu-r-webfont.ttf') format('truetype'),
	         url('fonts/ubuntu-r-webfont.svg#Ubuntu-r') format('svg');
	    font-weight: normal;
	    font-style: normal;

	}

Même si c’est déconseillé, on peut pour aller plus vite  appeler notre police via la règle css @import:

 @import url(http://fonts.googleapis.com/css?family=Ubuntu-r);

votre police fonctionnera sur les principaux navigateurs à jour.

Il vous faudra bien sur appliquer votre police via la propriété font-family à tous les éléments voulus

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *