Utiliser les polices de caractères avec CSS3

Ensemble, nous continuons à découvrir les nouvelles possibilités offertes par CSS3. Cet article est consacré aux polices de caractères avec CSS et comment les utiliser.

L’utilisation d’une police de caractères

Vous pouvez utiliser des polices de caractères avec CSS. Dans la première partie, vous allez apprendre à utiliser les polices de caractère communes qui sont déjà présentes sur l’ordinateur de votre internaute.

Dans la deuxième partie, vous allez apprendre à utiliser les polices CSS3 de caractères importées, vos propres polices personnalisées qui sont originales. L’utilisateur va les télécharger sur son PC pour afficher votre site internet.

Maintenant, place aux polices de caractères CSS3 qui sont déjà présentes sur son ordinateur, et comment les utiliser. Il suffit d’utiliser la balise font-family : Arial.

Exemple :

h1 { font-family: "Arial"; }

Ainsi, tous les textes contenus dans une balise h1 auront une police Arial.

Le style d’une police de caractères

Vous pouvez définir le style d’une police de caractères. Vous l’avez déjà appris dans un sujet précédent. En italique, avec font-style italic, font-weight:bold en gras, et pour définir la taille de la police c’est font-size avec une valeur en pixels, ou EM.

Exemple :

h1 {
   font-family: "Arial";
   font-style: italic;
   font-size: 43px;
}

Voici un exemple de code source où vous pouvez cumuler plusieurs balises CSS pour le même élément. Pour h1, vous utilisez la police de caractères Arial. Vous l’affichez en italique et d’une taille de 43 pixels. Dans votre document HTML, à chaque fois qu’il y aura des balises h1, elles seront avec la police Arial, en italique et de 43 pixels pour la hauteur du texte.

Autre exemple :

h2 {
   font-family: "Impact";
   background-color: #cccccc;
   color: #097B6B;
   font-size: 30px;
}

Les polices système

Vous pouvez utiliser toutes les polices CSS3 qui sont présentes sur l’ordinateur de votre utilisateur, il s’agit des polices système.

Vous pouvez aussi accéder aux polices systèmes spécifiques. Par exemple, font: caption pour utiliser les polices associées au bouton.

font: icon, pour les polices associées aux étiquettes d’une icône. Sous Mac, Linux et Windows, ce sera des polices différentes en fonction de l’OS. Prenez en compte que votre texte va s’afficher avec des polices différentes si vous utilisez les polices système.

Vous avez aussi font: menu, la police associée au menu.

font: message-box, la police associée aux fenêtres des boîtes de dialogue.

font: small-caption, les polices associées aux petites étiquettes, et font: status-bar, la police associée à la barre de statut.

Déclarer une police de caractère non standard

Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité.

Le sélecteur @font-face existe depuis très longtemps : depuis les CSS 2.0. Mais seul Internet Explorer l’implémentait depuis sa version 4 (oui, oui, vous avez bien lu !) et avec un format de police propriétaire peu pratique. Cela n’a donc jamais pris. Heureusement, il y a maintenant des moyens simples pour surmonter cet écueil.

La police de caractère, ou plutôt les différents formats de la police de caractère, doit être placée sur le serveur. Comme pour une image de fond, elle sera chargée au moment de l’appel de la feuille de style dans laquelle est déclarée @font-face.

Il y aura donc les mêmes contraintes techniques et éthiques qu’avec une image :

1. il faut faire attention au poids pour éviter des lenteurs de chargement et donc les problèmes de performances ;
2. les droits d’auteur sont peut-être encore plus féroces que pour les images, il faut donc n’utiliser que des polices dont on est en accord avec la licence.

Pour l’exemple je vais utiliser la police de caractère quadranta, gratuite, disponible sur le site Dafont.

Étape 1 : obtenir tous les formats nécessaires

Quadranta est téléchargeable sous le format .otf (OpenType Font). Ce format est reconnu par Firefox, Chrome, Safari, Opéra. En revanche il n’est reconnu ni par MSIE, ni par certains navigateurs de smartphones.

Pour être complet, il donc faut aussi avoir cette police aux formats .eot (Embedded OpenType, pour MSIE) et .svg. Existent aussi les formats .ttf (TrueType Font, très répandu) et .woff (Web Open Format Font) qui est le petit format qui monte, qui monte.

Nous vous voyons écarquiller les yeux, vous demandant où et comment vous allez pouvoir récupérer tous ces formats… Pas de panique, FontSquirrel est là. Ce générateur de font-face va vous fournir tous les formats nécessaires en moins de temps qu’il faut pour le dire.

Nous disposons donc au final des fichiers suivants (ainsi qu’un .ttf qui ne me servira pas) :

• quadranta.otf : 20 ko
• quadranta.woff : 26 ko
• quandrata.eot : 35 ko
• quadranta.svg : 58 ko

Pour des raisons de performance il faudra que l’ordre de déclaration des différents formats soit identique (du plus léger au plus lourd).

Étape 2 : coller le code dans la feuille de style

Non seulement FontSquirrel fournit les différents formats, mais il fournit aussi le code CSS qui va bien. Après avoir reclassé les formats par poids croissant et remplacé le .ttf par .otf, il est de ce type :

Code CSS

@font-face {
font-family: 'quadranta';
src: url('quadranta.eot');
src: url('quadranta.otf') format('truetype'),
     url('quadranta.woff') format('woff'),
     url('quadranta.eot?#iefix') format('embedded-opentype'),
     url('quadranta.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}

Le nom déclaré par font-family sera celui à utiliser dans le reste de la feuille de style aux endroits souhaités.

L’ancre #QuadrantaBold déclarée pour le format .svg est nécessaire pour que les navigateurs retrouvent leurs petits. C’est en effet l’id inscrit dans le fichier svg et qui indique le chemin à suivre. Il ne faut donc pas modifier cette déclaration.

Restent les déclarations .eot : pourquoi 2, pourquoi différentes ?

MSIE a beau être le navigateur le plus ancien à implémenter @font-face, il fallait quand même bien qu’il complique un peu les choses, sinon ce ne serait pas drôle… Il y a une question de performance (sinon MSIE charge tous les formats, même ceux qu’il ne gère pas) et ensuite les nouveautés d’IE9, qui comprend d’ailleurs le format .woff plus léger et qu’on préférera lui faire ingurgiter …

En fait, cette double déclaration peut être remplacée par une seule :

url('quadranta.eot?') format ('eot')

Tout est dans le ? et la déclaration de format('eot'). Et si vous voulez comprendre le pourquoi du comment, courez sur Typographisme qui explique tout ça très bien.

Le format .eot devant être déclaré en 1^er, le code CSS final sera donc :

@font-face {
font-family: 'quadranta';
src: url('quadranta.eot?') format('eot'),
     url('quadranta.otf') format('truetype'),
     url('quadranta.woff') format('woff'),
     url('quadranta.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}  
h4 {
font-family:quadranta, sans-serif;
font-size:3em;
}

Code HTML

<h4>
 Mammouthland
</h4>

Conclusion

Dans cet article, vous avez vu comment utiliser les polices CSS3 présentes sur l’ordinateur de votre utilisateur sur votre page Web. Pensez à en spécifier plusieurs, assez similaires, afin de palier au risque que la police ne soit pas sur son système.

Dans un prochains articles, vous verrez comment utiliser une police présente sur Internet, et ainsi être sûr que l’utilisateur possèdera la police.

---

Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA