Comment utiliser des police variables sur un site WordPress ?

Comment utiliser des police variables sur un site WordPress ?

août 20, 2015 0 Par Marco

Soyons honnêtes. Si vous utilisez une seule police de caractères sur votre site sans variation de taille ou d’espacement, les gens vont s’ennuyer. Ils ne liront pas vos articles. C’est pourquoi vous devez utiliser des polices variables sur votre site. Même si vous choisissez de n’utiliser qu’une seule police, vous pouvez l’ajuster suffisamment à travers des feuilles de style CSS pour qu’elle devienne fonctionnellement une multitude de choix de polices.

Qu’est-ce qu’une police variable ?

Les polices variables sont des polices uniques pouvant être modifiées par des codes CSS selon 5 critères différents. Chaque axe contrôle une facette particulière de l’apparence de la police et possède une étiquette CSS correspondante.

  • La taille (wght en CSS)
  • L’inclinaison (slnt en CSS)
  • Le caractère italique (italique en CSS)
  • La taille optique (opsz en CSS)
  • La largeur (wght en CSS)

Et puis il y a le pseudo-axe Grade, représenté par GRAD en CSS. De nouveaux axes peuvent être introduits (et le sont) par différentes entreprises au fur et à mesure que la technologie se développe. Il y a donc beaucoup de choses que nous allons pouvoir faire avec ce détail à l’avenir.

En combinant tous ces différents axes, vous pouvez faire en sorte que n’importe quelle police de caractères fasse à peu près tout ce que vous voulez. Vous pourrez même les animer comme des SVG.

Pourquoi utiliser des polices variables ?

La réponse la plus courte est qu’ils sont beaucoup plus efficaces que l’intégration et le rendu de plusieurs polices sur votre site. La documentation des développeurs de Google résume bien les choses :

Les polices variables OpenType nous permettent de stocker plusieurs variations d’une famille de types dans un seul fichier de polices. On a fait une expérience en combinant 12 polices d’entrée pour générer huit tailles, sur trois largeurs, à travers les styles italique et romain. Le stockage de 48 polices individuelles dans un seul fichier de police variable signifiait une réduction de 88 % de la taille du fichier.

L’utilisation des polices variables sur WordPress

Maintenant que nous savons que les polices variables sont assez fantastiques, la prochaine étape est de les intégrer au site WordPress.

Étape 1

La première chose que vous devez faire est d’installer la police sur votre site Web. Vous avez le choix entre 4 options pour effectuer l’installation :

  • Utiliser un plugin comme Use Any Font
  • Télécharger directement via l’interface Divi si vous êtes un membre ET
  • Créer un lien vers ce plugin en utilisant @font-face
  • Le faire à l’ancienne.

Quelle que soit la façon dont vous le faites, une fois que vous l’avez sur votre site, l’utilisation de la police est en fait assez facile.

Étape 2

Puisque les polices variables sont basées sur les feuilles de style CSS, vous devrez aller à l’endroit où vous avez ajouté votre CSS personnalisé. Cela peut être dans un fichier.css personnalisé, une feuille de style.css, dans le CSS supplémentaire de votre outil de personnalisation WordPress, ou même dans le bas de l’onglet Général des options du thème Divi (la plupart des thèmes ont une boîte similaire). Ensuite, vous devez entrer ce code (avec le nom des polices de variables que vous utilisez).

@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

Il ressemblera à quelque chose comme ceci dans votre fenêtre CSS.

Intégration des polices variables

Étape 3

C’est le moment de le personnaliser. Vous pouvez en faire ce que vous voulez, et le style peut être appliqué à n’importe quelle classe ou ID. Vous pouvez l’appliquer à l’ensemble du corps ou h1, h2, h3 ou même p. Ce sont des polices variables après tout.

Il y a deux façons de procéder. Le premier étant une ligne unique et efficace de CSS utilisant des paramètres de variation de police.

h3 {
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}

 

Vous pouvez les ajouter avec d’autres CSS, comme float ou z-axis ou n’importe quelle autre chose. Vous pouvez également saisir les axes sur des lignes individuelles.

h3 {
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100
}

 

édition d'une police dans les options de variation

Polices variables gratuites

Vous pouvez obtenir des polices personnalisées gratuites sur divers sites web. Les polices variables sont comme des douzaines de polices emballées dans une seule boîte, téléchargez-les et vous avez accès à plus d’options que vous ne pourrez imaginer.

Gardez à l’esprit

La seule chose que vous devez garder à l’esprit lorsque vous utilisez des polices variables sur votre site WordPress est que tous les navigateurs ne les supportent pas encore. Par exemple, Firefox rencontre des problèmes avec certaines d’entre elles. Donc, si vous prévoyez de faire de la police variable une partie inestimable de votre site Web, vous devriez probablement avoir un plan pour les utilisateurs de Firefox ou Microsoft Edge.