Déclarer une custom font (police personnalisée) dans votre thème WordPress s’avère très utile pour le personnaliser et l’adapter à votre charte graphique. Or, il arrive que la police d’écriture de vos rêves ne se trouve ni dans les options de votre thème, ni sur Google Fonts ou TypeKit.

Dans ce cas, il va falloir bidouiller un peu votre thème pour ajouter la police que vous souhaitez. Mais pas de panique, je vais vous expliquer comment faire !

Téléchargez la police

Tout d’abord, vous devez être en possession de la police, soit en la téléchargeant sur des sites de polices comme dafont par exemple, soit par vos propres moyens.

Gare aux droits d’auteurs, que vous devez respecter. N’hésitez pas à acheter la police quand cela est nécessaire. Vous ne ferez que rétribuer ceux qui ont travaillé dessus pour que vous puissiez en jouir !

Les formats TTF et OTF sont actuellement très utilisés, et sont compatibles avec la plupart des navigateurs. Néanmoins, si vous avez besoin de convertir la police à d’autres formats, rendez-vous sur Font Squirrel.

Uploadez la police sur votre serveur

Uploadez votre font dans un dossier « fonts » de votre thème (thème enfant de préférence), via FTP.

Déclarez votre nouvelle police dans votre CSS

Rendez-vous dans le fichier CSS du thème enfant si vous avez uploadé la police dans le dossier « fonts » du thème enfant, sinon dans le fichier CSS du thème parent, ou bien dans les paramétrages de votre thème si celui-ci permet de customizer le CSS via le backoffice de WordPress. Voici comment s’y prendre :

@font-face {
font-family: mapolice; 
src: url("fonts/mapolice.otf");
src: url(fonts/mapolice.ttf) format('truetype');
font-weight: normal; 
}

Utilisez la nouvelle police via le CSS

Pour utiliser votre nouvelle font fraîchement déclarée, rien de plus simple, il vous suffit de dire au fichier CSS à quels formats vous souhaitez affecter la police :

p,span {font-family: mapolice, Open Sans, Arial, sans-serif !important;}
h1,h2,h3,h4,h5,h6 {font-family: mapolice, Open Sans, Arial, sans-serif !important;}
div {font-family: mapolice, Open Sans, Arial, sans-serif !important;}

Et voilà, si cet article vous a aidé, n’hésitez pas à le partager sur les réseaux sociaux 😉