Intégration de polices d écriture originales en CSS3

Dans cet article nous verrons une possibilité d’amélioration de vos pages HTML grâce à la nouvelle technologie CSS3 !

Je vais vous proposer des astuces pas très compliquées mais qui donneront un plus à votre site !

Pourquoi voyons-nous toujours les mêmes polices sur la toile ?

Nous voyons souvent des polices comme Arial ou Verdana sur la plupart de sites. Pourquoi n’utiliser que ces polices ?

Dans les précédents standards il fallait que la police utilisée sur le site soit en réalité installée sur l’ordinateur qui visualisait le site. Ainsi, les personnes ayant juste les polices de base ne pouvaient pas voir les polices plus originales.

Au contraire, la mise en page du site n’était plus du tout cohérente puisqu’elle avait été développée pour une police originale X alors que la plupart des internautes la voyait avec une police de base Y. Pour ne plus connaître ces problèmes la plupart des webmasters préféraient alors coder avec les polices de bases.

CSS propose d intégrer directement les polices sur votre site

Avec l’arrivée de CSS3 une solution nous est proposée : directement intégrer la police dans votre site.

Voici un exemple :

Avec la police de base Arial : Rose blanche

Avec la police originale Herr Von Muellerhoff : Rose blanche

Laquelle préfèreriez-vous pour présenter une magnifique rose blanche ?

Je pense que vous opteriez également pour la police Herr Von Muellerhoff.

Comment faire pour avoir une police originale sur votre site ?

Je vais vous expliquer comment ajouter cette police sur votre site et qu’elle soit visible par tous.

1. Se connecter au site Google Webfont

2. Choisir la police qui vous convient en cliquant sur le bouton « Add to collection »

3. Aller tout en bas du site, au niveau de la barre bleue où est inscrit « X font family in your collection » et cliquer sur le bouton le plus à droite « Use »

4. Vous arrivez sur une page à 4 étapes.
L’étape 1 vous permet de vérifier que la police sélectionnée est la bonne.
L’étape 2 vous permet de choisir le style de caractères attendus.
L’étape 3 est le code à insérer dans le HEAD de votre site (explications ci-dessous).
L’étape 4 est le code CSS à insérer dans la feuille de style (explications ci-dessous).

5. Insérer le code dans le head de votre site
Copier le code que l’on vous donne à l’étape 3.
Coller ce code entre les balises

de votre site.

Mon exemple :

6. Insérer le code CSS dans la feuille de style de votre site
Copier le code de l’étape 4.
Coller ce code tout en l’ajustant à l’élément dont vous voulez voir changer la police

Mon exemple :
Feuille de style .css

 .txt-rose-blanche {
font-family: 'Herr Von Muellerhoff', cursive;
font-size : 52px;
}

Page .html

 Rose blanche

A votre tour d’essayer !

par Marine Hollner