Aujourd’hui j’ai découvert une petite manip’ idéale pour personnaliser sans limites les polices de votre site.

Google Font : de la qualité mais quelques manques

J’imagine que beaucoup d’entre vous utilisent les polices Google Fonts pour personnaliser leur design, moi même je procédais ainsi. L’avantage avec Google Fonts est que l’on retrouve des polices de qualité souvent très utilisées par les web designers. De plus, l’intégration de ces polices comme webfont de notre site est très simple. Il suffit d’intégrer une ligne de code dans le header.php et de changer la font-family de l’élément souhaité. Cependant, malgré sa puissance, Google Fonts ne regroupe pas toutes les polices disponibles sur le web. De plus, je reproche au moteur de recherche de police de présenter une interface de tri trop difficile à manipuler. Les polices ne sont présentées que sur une seule page et il faut s’habituer au options de tri (épaisseur, souplesse, etc.). Pour ma part, le problème était, ce matin, que je souhaitais utiliser la police BlackJack Regular qui est disponible un peu partout sauf sur Google Fonts. Mon but était donc de transformer cette police en une webfont compatible avec mon site internet.

Convertir une font .ttf en une font .otf

Pour les étapes d’installation, votre police doit être en format .otf. Si c’est le cas vous pouvez passer d’ores et déjà au chapitre Création d’une webfont. Pour le cas de la font BlackJack Regular, elle n’est disponible qu’en format .ttf. Je vais donc utiliser le site internet freefontconverter qui va me permettre de convertir ma police .ttf en police .otf . La manipulation du logiciel en ligne est plutôt simple, il vous suffit tout simplement de choisir le fichier à convertir et ensuite de sélectionner le format de conversion souhaité (pour nous il s’agira du format .otf . Cliquez ensuite sur « Convert » et votre font.otf se téléchargera automatiquement. Simple et rapide !

Création d’une webfont

Maintenant que vous avez votre police en format .otf, vous allez pouvoir passer à la création d’un dossier d’installation pour votre webfont. Pour se faire, nous allons utiliser le site internet Font Squirrel et plus précisément la rubrique webfont generator. Avant toute chose, je préfère préciser que votre police doit être libre d’utilisation pour que cela fonctionne. Si la police dispose d’une licence restrictive, la création du dossier d’installation ne fonctionnera pas, Font Squirrel le bloquera automatiquement. Donc avant de poursuivre cette étape, vérifier la licence de votre police. Pour ma part, j’ai eu de la chance, la police BlackJack Regular est autorisée à un usage personnel.

Bien ! Une fois que vous vous êtes rendu sur la page Webfont Generator, laissez la case « optimal » cochée par défaut et cochez sur « Yes, the fonts I’m uploading are legally eligible for web embedding. ». Cliquez ensuite sur le bouton « Add fonts » en haut à gauche et sélectionnez la police souhaitée dans son format .otf . Le logiciel lancera alors automatiquement la création du dossier. Attendez qu’il arrive à 100% et cliquez sur « Download your kit« , vous téléchargerez ainsi un fichier .zip qu’il faudra ensuite extraire dans le dossier de votre choix.

Installation d’une webfont sur WordPress

Pour notre installation, seul 5 fichiers nous intéressent dans le dossier .zip extré. Il s’agit des fichiers .eot , .svg , .ttf , .woff et le fichier stylesheet.css . Dans un premier temps, nous allons, avec FileZilla, envoyer ces fichiers dans le dossier wp-content/themes/mon_theme/fonts (créez-le si il n’existe pas déjà).

Ensuite nous allons ouvrir le fichier style.css de notre thème et insérer le code présent dans le fichier stylesheet.css, téléchargé auparavant. N’enregistrez pas maintenant car quelques modifications doivent être apportées à ce code. En effet, l’url de destination n’est pas correct et il va falloir la corriger.

Dans cette partie de code que vous avez collé dans le fichier style.css de votre thème, vous allez donc devoir remplacer (je prends le cas de BlackJack Regular pour l’exemple) :

#font-face {
font-family: 'blackjackregular';
src: url('blackjar-webfont.eot');
src: url('blackjar-webfont.eot?#iefix') format('embedded-opentype'),
url('blackjar-webfont.woff') format('woff'),
url('blackjar-webfont.ttf') format('truetype'),
url('blackjar-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;  }

par

#font-face {
font-family: 'blackjackregular';
src: url('fonts/blackjar-webfont.eot');
src: url('fonts/blackjar-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/blackjar-webfont.woff') format('woff'),
url('fonts/blackjar-webfont.ttf') format('truetype'),
url('fonts/blackjar-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;
}

Comme vous pouvez le voir, nous avons rajouter le dossier parent « fonts » dans les url. Vous pouvez maintenant enregistrer votre fiche de style css, l’installation est terminée !

Appliquer la webfont sur les éléments souhaités

La manipulation se fera de même que d’habitude. Il suffit d’appliquer la règle  » font-family= »votrewebfont« ; » sur l’élément que vous souhaitez personnaliser.

Voilà, j’espère que ce petit tutoriel vous a été utile ou vous sera utile à l’avenir. N’hésitez pas à poser vos questions ou à donner vos avis en commentaires. Et bien sûr, un petit clic sur les boutons de partage est toujours le bienvenue ! 😉