Télécharger le PDF du cours
- Les propriétés de type
font-qui vont définir l’aspect des caractères en soi en qui agissent directement sur la police d’écriture (choix de la police, de la taille des caractères ou de leur poids entre autres) ; - Les propriétés de type
text-qui ne vont pas impacter directement l’aspect des caractères du texte mais nous permettre d’ajouter des effets de style autour de celui-ci (alignement du texte, soulignement ou encore ajout d’ombres autour des textes par exemple).
Dans cette leçon, nous allons nous intéresser à une première propriété de type font- qui va nous permettre de définir la police de nos textes : la propriété font-family.
La propriété CSS font-family : définition et exemples d’utilisation
La propriété CSS font-family va nous permettre de définir la police de nos textes, c’est-à-dire le rendu graphique de chaque caractère.
Il existe aujourd’hui un très grand nombre de polices d’écritures disponibles et parmi lesquelles on va pouvoir choisir mais il faut savoir que certaines versions de certains navigateurs que peuvent posséder vos visiteurs ne vont pas supporter certaines polices.
Pour cette raison, nous indiquerons toujours plusieurs noms de familles de polices à utiliser en valeur de la propriété font-family en commençant par celle préférée et en séparant chaque valeur par une virgule.
Ainsi, le navigateur va lire les différentes polices renseignées dans font-family dans l’ordre et utiliser la première qu’il supporte.
Notez ici que si vous renseignez un nom de police qui contient des espaces, vous devrez le mettre entre guillemets ou apostrophes.
Voyons un premier exemple d’utilisation de font-family ensemble. On va définir une même police pour toute la partie visible de notre page HTML en appliquant notre propriété à l’élément body (les éléments dans le body hériteront par défaut de la valeur passée à la propriété font-family pour l’élément body).
See the Pen Cours HTML CSS 4.1.1 by Pierre (@pierregiraud) on CodePen.
Dans cet exemple, j’indique trois polices d’écriture différentes en valeur de ma propriété font-family : Source code pro, Verdana et sans-serif.
Lors de l’affichage, mon navigateur va lire les valeurs dans leur ordre d’écriture et va appliquer la première valeur de police qu’il supporte / reconnait.
Dans cet exemple, j’ai indiqué intentionnellement trois polices particulières : la police Source code pro est ce qu’on appelle une « Google Font » (nous reviendrons dessus plus tard) tandis que Verdana fait partie des « web safe fonts » (en français « famille de polices sûres ») et sans-serif est ce qu’on appelle une « famille générique ».
Les web safe fonts et les familles génériques
Les web safe fonts où « polices d’écriture sûres pour le web » sont un ensemble de polices qui sont lues de manière universelle par toutes les versions de tous les navigateurs dignes de ce nom.
En précisant une police qui appartient à cette catégorie en valeur de font-family, on s’assure donc que le navigateur de nos visiteurs sera à minima capable de lire et d’afficher cette police (à priori).
Une famille générique ne représente pas une police en soi mais va servir à définir la forme des caractères à afficher de manière sommaire. Les familles génériques doivent toujours être mentionnées en dernière valeur de la propriété font-family. Elles vont être utilisées en dernier recours si le navigateur n’arrive à lire aucune des polices indiquées dans la propriété font-family.
La famille générique serif par exemple est caractérisée par l’empattement de ses caractères tandis que ce sera le contraire pour sans-serif. Notez bien que chaque police connue appartient automatiquement à une famille de polices par défaut.
Il existe 5 familles génériques disponibles en CSS aujourd’hui :
| Famille générique | Description |
|---|---|
| serif | Les caractères possèdent un empattement |
| sans-serif | Les caractères ne possèdent pas d’empattement |
| monospace | Les caractères ont tous la même taille et sont espacés équitablement |
| cursive | Les caractères sont souvent fins et ressemblent à une écriture manuelle soignée |
| fantasy | Les caractères sont généralement difformes ou très stylisés, au contraire de la famille générique monospace |
En général, on indiquera toujours au moins une police appartenant aux web safe fonts en valeur de notre propriété font-family ainsi qu’une famille générique associée afin d’être certain qu’au moins une valeur puisse être lue par le navigateur de vos visiteurs.
Comme je vous l’ai dit précédemment, chaque police connue appartient automatiquement à une famille de polices. Une bonne pratique va donc être de préciser une série de polices appartenant à la même famille générique (par exemple, que des polices sans-serif) puis de préciser en dernière valeur de font-family la famille générique associée afin de garder un maximum de cohérence.
Voici une liste des web safe fonts les plus utilisées et de leur famille générique associée :
| Famille générique | Police |
|---|---|
| Serif | Times New Roman, Georgia |
| Sans-serif | Arial, Verdana |
| Monospace | Courier New, Lucida Console |
| Cursive | Comic sans MS |
Définition, intégration et utilisation des Google Fonts
Google Fonts est un service d’hébergement de polices libres de droit (c’est-à-dire téléchargeables et utilisables gratuitement) créé par Google.
Chacune des polices présentées sur la plateforme peut être utilisée sur n’importe quel site. Pour cela, nous allons devoir créer un lien en HTML vers la police Google désirée puis mentionner la police en valeur de notre propriété font-family en CSS.
Un des grands intérêts des Google Fonts est que les polices Google ne dépendent pas d’un navigateur mais peuvent être lues par (quasiment) tous les navigateurs. En effet, l’idée va être de pré-charger le jeu complet de caractères de la police via Google dans le navigateur d’un utilisateur lorsque celui-ci tente d’accéder à une page de notre site. Ainsi, les risques de non comptabilité d’une police sont très sérieusement réduits.
L’autre grand avantage est que nous allons pouvoir choisir parmi une très longue liste de polices et ainsi totalement personnaliser l’écriture sur votre site.
Pour utiliser les Google Fonts, il va tout d’abord nous falloir choisir une police dans la liste proposée sur le site de Google dédié.
Sur ce site, vous allez pouvoir soit rechercher une police en particulier en utilisant la recherche en haut à droite, soit pouvoir définir des critères de recherche pour trier les polices et n’afficher que certains types de polices.
Vous allez ainsi pouvoir filtrer les polices selon leur popularité pour voir quelles sont les polices les plus tendances ou encore pouvoir choisir de n’afficher les polices que d’un type de famille générique ce qui va pouvoir s’avérer très utile.
Pour ma part, je vais choisir la police « Open sans », l’une des polices les plus communément utilisées ces dernières années.
Nous allons ici soit pouvoir sélectionner directement la police en question avec les options par défaut en cliquant sur le « + », soit pouvoir cliquer sur la police en soi pour avoir davantage d’informations par rapport à cette Google Font.
Cela va également nous permettre de voir l’aspect des caractères de notre police selon l’épaisseur de celle-ci.
On va également nous dire avec quelle autre police notre police est souvent couplée sur un site. Il est en effet reconnu comme une bonne pratique d’utiliser deux polices différentes pour les titres et les autres contenus textuels et la plupart des sites appliquent cette règle.
Ici, par exemple, on s’aperçoit que la police « Open Sans » est souvent utilisée avec une autre police bien connue qui est Roboto. Nous pouvons également à cet endroit choisir le style de notre ou de nos polices (Light, Regular, Bold, etc.).
Sélectionnons ici les polices Google « Open sans » et Roboto en version Regular. Pour cela, commencez par sélectionner la police « Open sans » en cliquant sur le « + » en haut à droite de la page puis sélectionnez de la même façon Roboto dans la liste des polices souvent utilisées ensemble. Vous devriez alors avoir un encadré en bas de page avec vos polices sélectionnées.
Cliquez sur cet encadré puis sur la flèche à l’intérieur.
Vous êtes alors finalement ramené sur la page vous expliquant comment intégrer ces deux polices dans vos pages et vous donnant les codes d’intégration de ces deux polices.
Comme vous pouvez le constater, la manipulation est très simple : il suffit d’ajouter dans l’élément head de notre page HTML un élément link et d’indiquer en valeur de href l’URL fournie (ici, par exemple, ce sera href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto") puis de préciser finalement un attribut rel="stylesheet".
Ensuite, nous n’avons plus qu’à indiquer le nom de nos polices en valeur de notre propriété font-family dans notre feuillet CSS et le tour est joué ! Regardez plutôt l’exemple suivant dans lequel j’ai intégré mes deux Google Fonts :
See the Pen Cours HTML CSS 4.1.2 by Pierre (@pierregiraud) on CodePen.
Note : Si vous utilisez comme moi le navigateur Google Chrome il est possible que les Google Fonts soient disponibles pour vous sans que vous ayez besoin du lien d’intégration. Cependant, il faut ici penser à vos visiteurs : tous ne vont pas utiliser Google Chrome et c’est la raison pour laquelle il est obligatoire d’insérer le lien de pré chargement des polices dans votre code via l’élément link et son attribut href.
