Ajouter une police externe à son site web avec des web fonts

Par le passé, les contraintes propres aux polices de caractères et les standards du web ont limité le choix de polices utilisables pour la création d'un site web.

L’utilisation des web fonts (polices en ligne) permet de contourner cette limitation, tout en s’assurant que son site s’affichera de manière identique (ou presque) indépendamment du navigateur (…récent) utilisé.

Ce tutoriel explique comment utiliser des polices Google Web Fonts.

Pour être en mesure d'utiliser cette fonctionnalité, vous devez avoir soucrit au préalable à la version Pro, la version Business ou la version E-commerce.

Pour une utilisation d'une autre police externe, nous vous proposons de consulter ce tutoriel : Comment ajouter une police externe avec FontSquirrel ?

Le choix des polices

Il existe un nombre grandissant de sites proposant des polices utilisables sur des sites web. La plupart sont payants, ou proposent l’utilisation des polices contre l’affichage d’un bouton ou bannière sur votre site.

Voici une petite sélection des sites proposant des polices intégrables à votre site web :

Ajouter un Google Web Font à son site

Google Web Fonts propose une collection de polices de caractères facilement intégrables à un site web, et entièrement gratuites (disponible uniquement en anglais pour l’heure).

Pour s’en servir, rendez-vous d’abord sur le site de Google Web Fonts et sélectionnez la ou les polices que vous souhaitez utiliser. N’oubliez pas que chaque police utilisée pour votre site alourdira le chargement de vos pages.

Pour récupérer le code nécessaire pour l’utilisation de la police sur votre site, cliquez d’abord sur la police que vous avez choisie, puis sur l’onglet Use this font.

Il faut au minimum copier le code d’intégration de la police (1), mais vous pouvez également vous servir du style CSS proposé (2) et l’adapter aux éléments de votre feuille de styles CSS que vous souhaitez.

Personnaliser la police avec du CSS3

Si vous souhaitez aller encore plus loin avec la personnalisation de la police, servez-vous du Font previewer.

Cet outil vous permettra d’ajouter des styles supplémentaires, tels que des ombres portées et des transformations de texte, ainsi que d’ajuster l’espacement des caractères, lignes et mots.

Une fois les réglages effectués, la balise d’intégration et le style CSS sont générés automatiquement, vous permettant ainsi de les récupérer par copier-coller.

Coller le lien pour intégrer la police via le manager

Lors de l’affichage d’une page, la balise link (lien) permettra aux navigateurs d’accéder au fichier en ligne nécessaire pour l’utilisation de la police de caractère choisie, appliquée ensuite aux contenus via des styles de mise en forme (styles CSS).

Il suffit de coller la balise telle quelle, sous le menu Configuration > Réglages > Zones éditables du manager de votre site, dans la partie Balises META supplémentaires puis d’enregistrer.

Appliquer la police aux éléments de votre site

Notez que selon le thème que vous avez appliqué à votre site, et ses réglages par défaut ou personnalisés, il faudrait également appliquer ce style à d'autres éléments du CSS en plus du body (par exemple, les titles, liens etc.).
Vous pouvez également ne l'appliquer qu'à certains éléments du site, tels les titres, en ciblant uniquement ces sélecteurs CSS, à la place du body.
Si vous avez activé le mode avancé de personnalisation, vous pourrez appliquer la police aux éléments dans la feuille de styles du site, tels que les titres des pages, ou les liens des menus.
Vous pourrez également éditer le contenu d’une page pour affecter le style à un mot ou paragraphe de texte.