Utilisez des Web fonts sur votre site Web

Utilisation et configuration de Web font

Dans le cadre de la création ou la refonte d’un site Web, vous avez certainement envie d’utiliser une police sortant un peu de l’ordinaire.

Voyons cette fois comment utiliser (presque) n’importe quelle police sur votre site Web ou votre blog, en tant que Web font.

L’état de l’art, avant l’apparition des Web fonts

Il y a quelques années, les navigateurs possédaient un nombre fini de polices, et souvent, elles étaient différentes d’un navigateur à l’autre.

Cela obligeait soit à ne pas faire de folie et écrire avec une de ces polices fournies,  soit, pour avoir un rendu uniforme quelque soit le navigateur, créer des images contenant du texte dans une police reflétant plus l’esprit du site.

Les inconvénients du texte dans les images

Cette technique de création d’images contenant du texte, et donc potentiellement du contenu présentait plusieurs inconvénients :

  • il était nécessaire d’ouvrir son éditeur d’images favori pour modifier le texte
  • à moins de penser à définir la balise alt assidument, les moteurs de recherche n’avaient pas de moyen de connaître le contenu de celles-ci. En clair, même si elle ne pénalisait pas le SEO, cette méthode ne l’avantageait pas.
  • les effets de styles, comme les menus survolés qui changent d’apparence, nécessitaient d’avoir au moins deux versions de la même image, doublant ainsi les temps de chargement. Et je ne parle même pas (en fait si) des problématiques de préchargement, qui, avec une faible bande passante, pouvait faire disparaître l’image d’origine, avant de laisser voir l’image survolée.
  • enfin, en cas de site international, les images (originales et survolées le cas échéant) devaient être disponibles dans plusieurs langues.

Mais ça c’était avant.

Et maintenant ?

En effet, aujourd’hui, nous avons accès à davantage de polices, grâce à des services tels que Google Fonts ou Font Squirrel.

Il est même possible de les personnaliser en CSS, pour ajouter des effets, des bordures, des ombres, …

Utilisation de Google Fonts

Google Fonts propose des polices hébergées sur leurs serveurs qui peuvent être incluses facilement sur votre site, en y indiquant l’adresse d’un fichier CSS.

Utilisation et configuration de Web font : Google Fonts
Google Fonts
Son utilisation est simple. Après avoir trouvé la police qui correspond le mieux à ce que vous voulez faire, ajoutez la à votre collection.

Ensuite, cliquez sur Review pour la voir en ‘grandeur nature’ dans des paragraphes et dans des tailles différentes. Vous pouvez aussi essayer avec un extrait de votre contenu dans l’onglet Test Drive.

Utilisation et configuration de Web font : Le test drive de Google Fonts
Le test drive de Google Fonts
Normalement, toutes les polices de Google Fonts les supportent, mais vérifiez quand dans l’onglet Character Set que les accents sont bien disponibles.

Enfin, cliquez sur le bouton Use. Jetez un œil à l’indicateur de poids, pour voir à quel point la police impacte le temps de chargement de la page.

Google Fonts vous indique à ce moment là comment utiliser la police.

La première chose à faire est de copier l’inclusion du fichier CSS dans l’en-tête de vos pages Web. Par exemple :

<link href='http://fonts.googleapis.com/css?family=MedievalSharp' rel='stylesheet' type='text/css'>

Il est également possible d’utiliser la balise @import en CSS, ou encore d’inclure la police en JavaScript.

Il ne reste plus qu’à utiliser la police en CSS dans les éléments choisis.

Par exemple, pour appliquer la police à toute la page Web :

body { font-family: 'MedievalSharp', cursive; }

Pour n’impacter que les titres h1 :

h1 { font-family: 'MedievalSharp', cursive; }

Personnalisation

Une page sur le site de Google Fonts explique comment personnaliser la police en ajoutant des ombres et d’autres effets venant de CSS.

En complément,  le site Best Web Fonts permet de sélectionner des effets et de voir le code CSS à insérer.

Utilisation et configuration de Web font : Personnalisation avec Best Web Fonts
Personnalisation avec Best Web Fonts
Il propose une quinzaine d’effets, qui sont bien sûr modifiables ensuite, à la main cette fois.

En clair, il s’agit d’une bonne base pour récupérer des idées de mise en forme.

Toutefois, bien que celles proposées soient nombreuses, toutes les polices de Google Fonts ne sont pas disponibles.

Une alternative : Font Squirrel

Font Squirrel est un autre site proposant des polices.

Utilisation et configuration de Web font : Font Squirrel
Font Squirrel
Cette fois, elles ne sont pas destinées au Web seul, et elles ne sont pas hébergées, contrairement à celles de Google. Il est donc nécessaire d’héberger soi-même ces polices, ce qui peut présenter certains avantages.

Pour l’utiliser, trouvez la police qui va bien, cliquez sur Test Drive, saisissez quelques mots et vérifiez surtout que les accents sont bien présents.

Et nous touchons ici au point faible de Font Squirrel : beaucoup de polices ne proposent pas la gestion des accents, et il n’est pas possible de le savoir avant d’essayer la police (par Test Drive donc).

Pour télécharger, installer et configurer la police sur votre site Web, sur l’onglet Web font kit, cliquez sur Download @font-face kit, ce qui démarre le téléchargement d’un fichier zip contenant les fichiers à mettre en place sur votre site Web.

Utilisation et configuration de Web font : Télécharger la police en Web font
Télécharger la police en Web font
Pour installer la police, il suffit de copier le dossier portant le nom de la police dans le dossier styles (par exemple) de votre site Web.

Pour gagner de l’espace sur votre hébergement, vous pouvez enlever le dossier specimen_files et le fichier dont le nom se termine par -demo.html.

Ensuite, comme pour Google Fonts, il reste à inclure le fichier CSS, qui est local cette fois :

<link rel="stylesheet" href="style/genzschetheyse_regular_macroman\/stylesheet.css" type="text/css" />

Puis, utilisez la police comme nous l’avons vu précédemment.

Un indice pour trouver la valeur à inclure dans font-family : elle se trouve dans le fichier stylesheet.css (à la ligne font-family aussi).

Vous n’avez toujours pas trouvé la police qui irait si bien à votre site ?

Si avec tout ça vous n’avez toujours pas trouvé votre bonheur, tout n’est pas perdu.

En effet, vous n’êtes pas limités aux polices fournies par Font Squirrel ou Google Fonts. Vous pouvez les trouver sur d’autres sites qui ne sont pas spécialisés dans les polices Web.

Le site le plus connu dans ce domaine est Dafont. En plus de proposer un choix plus que vaste, il affiche des informations utiles, notamment la prise en compte des accents.

Utilisation et configuration de Web font : Dafont
Dafont
Ainsi, choisissez la police qui vous convient et téléchargez ses fichiers.

Et là vous vous demandez certainement ce que vous pouvez faire de ces fichiers TTF. La réponse est simple, grâce à Font Squirrel.

Retournez sur le site Font Squirrel, sur la page Webfont generator et ajoutez les fichiers téléchargés sur Dafont (pas le fichier zip, mais son contenu). Attention, il n’est possible de télécharger les fichiers que trois par trois. Il est donc nécessaire de cliquer sur Add fonts plusieurs fois si la police comporte plus de trois fichiers.

Utilisation et configuration de Web font : Le générateur de Web font de Font Squirrel
Le générateur de Web font de Font Squirrel
Confirmez que vous avez pris connaissance de la licence de la police et qu’elle peut être utilisée sur votre site le cas échéant.

Enfin cliquez sur Download your kit, et la magie opère.

Comme le package vient de Font Squirrel, l’installation et la configuration sont identiques à ce que nous avons vu plus haut : copie des fichiers dans le dossier style, inclusion du fichier stylesheet.css et modification des classes CSS dans lesquelles vous voulez utiliser la police.

Cette méthode est un peu plus longue mais ouvre énormément de possibilités : toute police trouvée sur le Web (bien sûr, dont la licence le permet) peut être incluse sur vos pages).

Attention toutefois au poids des fichiers utilisés par la police. Il ne doivent pas être trop lourds, sous peine de ralentir le chargement de votre site.

Le mot de la fin

Nous avons vu comment choisir, installer et configurer une Web Font, mais aussi comment la personnaliser.

Nous verrons également prochainement comment ajouter un peu d’animation à ces textes grâce à CSS.

Si vous utilisez WordPress, je vous conseille d’utiliser un thème enfant pour personnaliser les polices.

Enfin, ne multipliez pas les Web fonts. Plus votre site en nécessitera, plus il mettra de temps à charger.

Cet article vous a été utile ? Partage it !

2 réflexions au sujet de « Utilisez des Web fonts sur votre site Web »

    1. Bonjour Olivier,
      C’est exact. Le truc c’est que @import fait une requête supplémentaire.
      Le mieux, quelle que soit la méthode utilisée, est de récupérer le contenu du fichier référencé par @import et de le copier localement.
      David

Laisser un commentaire

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

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.