Héberger localement des polices Google Fonts

PAR LE CODE (MÉTHODE COMPLEXE)

Cette approche est réservée aux développeurs qui seront capables de suivre les bonnes pratiques de chargement des polices Web, Google Fonts.

TÉLÉCHARGER LES GOOGLE FONTS MANUELLEMENT

Rendez-vous sur le site de Google Fonts, effectuez une recherche puis cliquez sur Download family.

Décompressez l’archive ZIP puis vérifiez la présence des différentes variantes comme Regular, Italic ou Bold. Plus vous utilisez de variantes, plus vous impactez les performances. Il est donc pertinent de consulter votre web-designer pour spécifier les besoins avec précision. Il est rarement utile de charger toutes les graisses par exemple.

CONVERTIR LES POLICES (Google Fonts) AU FORMAT WOFF2

Il existe plusieurs formats de fichiers pour les polices dont les plus couramment utilisés sont :

• TrueType (TTF) ;
• OpenType (OTF) ;
• SVG (Scalable Vector Graphics) ;
• WOFF (Web Open Font Format) ;
• WOFF2 (Web Open Font Format 2) ;

Il y a encore quelques années, nous étions obligés de charger les différents formats pour assurer une compatibilité maximale entre les navigateurs de vos visiteurs.

Désormais, nous privilégions le format WOFF2 qui est compatible à plus de 96% selon Can I use.

Si vous récupérez une police au format TTF – c’est mon cas avec ABeeZee, il vous faut donc la convertir pour vous simplifier l’intégration par la suite. Il existe de nombreux sites Web gratuits pour opérer cette conversion comme CloudConvert.

Il vous suffit d’envoyer les fichiers décompressés puis de lancer la conversion. Vous pourrez alors récupérer les fichiers convertis sur votre machine.

ENVOYER VOS POLICES SUR VOTRE SERVEUR

Pour ce faire, il vous faudra un client FTP pour envoyer les fichiers convertis dans le dossier de votre thème sous /wp-content/themes/mon-theme/ ou équivalent. Pour ma part, j’ai pour habitude de créer un dossier à l’intérieur du thème sous la forme /assets/fonts/ pour m’y retrouver.

DÉCLARER LES POLICES WEB DANS VOTRE FEUILLE DE STYLES

Vous devez déclarer chaque variante en tant que @font-face comme ceci :

@font-face {
  font-family: 'abeezee';
  src: url('URL-police-regular') format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'abeezee';
  src: url('URL-police-bold') format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'abeezee';
  src: url('URL-police-italic') format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

Pour chaque variante, il vous faudra spécifier le chemin relatif du fichier que nous avons déposé à l’étape précédente. Vous êtes libre de renseigner des formats complémentaires comme le WOFF maximiser la compatibilité entre les navigateurs.

Indiquez ensuite les caractéristiques propres à chaque variante comme la graisse et le style. Par exemple, la variante italique doit être déclarée avec font-style: italic et un niveau de graisse normal. Certaines polices pourront embarquer des dizaines de variantes qu’il vous faudra déclarer en conséquence.

J’ai pris soin de nommer chaque variante avec le même nom de police via la propriété font-family. Cela me permet d’appliquer les styles bien plus facilement sur mes pages Web.

UTILISER LES POLICES DANS MON CODE CSS

A présent que les polices sont correctement déclarées, je peux les utiliser pour définir les styles typographiques. Vous pouvez par exemple déclarer une propriété font-family: 'abeezee' sur un paragraphe. Si le paragraphe contient du gras ou de l’italique, ils seront pris en charge grâce aux précédentes déclarations de variantes.

Je vous conseille par ailleurs de créer une classe par police comme ceci :

.font-family-body {
  font-family: 'abeezee';
}

De cette manière, il vous suffira d’utiliser cette classe directement dans votre code HTML / PHP. Si un jour, vous devez changer la police de corps de texte – comme dans mon exemple, vous n’aurez qu’une ligne de code à modifier.

TESTEZ ET VÉRIFIEZ SUR VOS SITES

À votre tour d’essayer d’hébergement localement les polices de Google et de tester les gains éventuels de performances ainsi obtenus.

Vous disposez à présent de toute l’information nécessaire pour le faire et vous y gagnerez aussi sur le plan de la vie privée. Rien que pour cela, vous devriez tenter l’expérience.

Je terminerai en vous proposant un choix alternatif : utilisez des polices open source et respectueuses de la vie privée comme les polices systèmes.

source : wpchannel

Votez : (3 votes, average: 5,00 out of 5)

Loading...