La propriété CSS font-family et les Google Fonts

Dans cette nouvelle partie, nous allons nous intéresser aux propriétés CSS permettant de mettre en forme des textes. Les propriétés CSS liées au texte peuvent être séparées en deux grandes catégories :

  • 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 polices (une « famille 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).

Support HTML pour illustrer le fonctionnement de font-family en CSS

Exemple d'utilisation de la propriété CSS font-family

Résultat visuel de l'utilisation de font-family

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 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 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ériqueDescription
serifLes caractères possèdent un empattement
sans-serifLes caractères ne possèdent pas d’empattement
monospaceLes caractères ont tous la même taille et sont espacés équitablement
cursiveLes caractères sont souvent fins et ressemblent à une écriture manuelle soignée
fantasyLes 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ériquePolice
SerifTimes New Roman,
Georgia
Sans-serifArial,
Verdana
MonospaceCourier New,
Lucida Console
CursiveComic sans MS

 

Définition, intégration et utilisation des Google Fonts

Google a développé sa propre liste de polices d’écriture appelées les Google Fonts.

Ces polices peuvent être utilisées sur n’importe quel site, le tout est de faire un lien en HTML vers la police Google désirée puis de l’utiliser comme valeur de notre propriété font-family en CSS.

Un des grands intérêts des Google Fonts est que les polices de 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é.

On peut télécharger et utiliser des police sur le site Google Fonts

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.

Selection police open sans google font

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.

Aperçu police google font

Aperçu poids police Google Font

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.

Proposition paire police google font open sans roboto

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.

Sélectionner les polices Google Font

Cliquez sur cet encadré puis sur la flèche à l’intérieur.

Confirmer la sélection de police Google Fonts

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.

Télécharger les liens des polices Google Font

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 :

Utilisation des Google Font en HTML

Utilisation des Google Font en CSS

Exemple d'utilisation des Google Font

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.

Laisser un commentaire