Intégrer manuellement une typo personnalisée dans WordPress

Intégrer manuellement une typo personnalisée dans WordPress

Publié le 28 avril 2018

Vous avez besoin d’ajouter une typo spéciale dans votre site WordPress ? Une police personnalisée peut complètement changer le design de votre site alors pourquoi vous en priver ? Dans un précédent article, nous avions vu comment choisir une typo personnalisée et comment intégrer une Google Font grâce à un plugin : Intégrer une typo personnalisée dans WordPress.

Aujourd’hui, nous allons voir comment procéder manuellement, 3 méthodes sont possibles dont un qui va quand même utiliser un plugin.

 

Ajouter manuellement des Google fonts

Cette méthode s’appuie sur un ajout de code dans les fichiers de votre thème WordPress. Nous vous recommandons fortement de créer un thème enfant pour votre site, sinon, ce que vous les modifications que vous allez faire sauteront à chaque fous que vous mettrez votre thème à jour, ce serait dommage ! Si vous ne savez pas comment faire un thème enfant, vous pouvez lire notre article à ce sujet : Comment créer un thème enfant wordpress (child theme)

Dans ce paragraphe, nous parlons d’intégrer des Google Fonts. Il va donc falloir choisir votre Google Font en consultant la librairie Google.

Choisissez votre police en utilisant les filtres qui sont à droite de la page. Comme nous l’avons déjà vu, vous pouvez utiliser votre propre texte pour voir ce que la typo rend dessus. Une fois la typo choisie, cliquez sur le + rouge :

Yes You Web - intégrer une typo dans WordPress

En bas de votre écran, vous allez voir une barre noire avec écrit 1 family selected. Editez cette fenêtre et cliquez sur Customize :

Yes You Web - intégrer une typo dans WordPress

Cochez les typo dont vous avez besoin. Notez que le bold est une vraie variante d’une typo et pas seulement du gras, vous voyez la nuance ? Si ça n’est pas clair, n’hésitez pas à nous poser la question en commentaires en bas de cet article, nous détaillerons ce point.

Donc cochez les typos dont vous avez besoin et cliquez sur Embed. Nous avons choisi Régular 400, Bold 700, Bold 700 italic et Black 900. Vous allez avoir l’écran suivant :

Yes You Web - intégrer une typo dans WordPress

Copiez le code qui apparaît dans le champ STANDARD et collez-le dans le fichier header.php de votre thème enfant :

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,700i,900" rel="stylesheet">

Voilà, c’est tout ! Il ne vous reste plus après qu’à utiliser votre nouvelle typo dans votre feuille CSS, par exemple :

h1 {
font-family: 'Roboto', sans-serif;
}

 

Ajouter des fonts personnalisées avec Typekit

Typekit est un autre moyen pour trouver des polices personnalisées. Contrairement à Google Font, Typekit propose plusieurs formules. Une formule gratuite avec plus de 280 polices mais si vous en voulez plus, il vous faudra prendre une des formules payantes : à partir de 49,99 $ par an.

Inscrivez-vous et c’est parti ! Créez votre kit.

Yes You Web - intégrer une typo dans WordPress

Sélectionnez une police depuis la librairie Typekit et ajoutez-la à votre kit. Cipiez le code « embed » et rendez-vous ensuite dans votre backoffice WordPress.

Vous devez maintenant installer et activer le plugin Typekit Fonts for WordPress. Une fois l’activation faite, rendez-vous dans Réglages / Typekit Fonts et collez le code « embed » à intégrer.

Yes You Web - intégrer une typo dans WordPress

C’est tout, vous pouvez maintenant utiliser votre typo dans votre feuille CSS :

h1 { 
font-family: 'modesto-condensed', Arial, sans-serif; 
} 

 

Ajouter manuellement des typo avec CSS3 @font-face

La manière la plus directe pour ajouter des polices personnalisées dans votre site WordPress, est d’utiliser la méthode CSS3 @font-face. Cette méthode vous permet d’utiliser n’importe quelle police personnalisée.

La 1ère chose à faire est de télécharger la police désirée dans un format web. Si vous ne l’avez pas en format web, vous pouvez la convertir grâce au FontSquirrel Webfont generator.

Une fois que vous avez récupéré les fichiers de votre police avec ses différentes extentions (woff, woff2, svg, eot…), vous devez les télécharger sur votre serveur web. Nous vous recommandons d’ajouter ces fichiers au dossier « fonts » de votre thème enfant. Vous pouvez utiliser votre FTP pour faire cela.

Une fois vos typo placées sur le serveur, vous allez devoir les appeler dans le fichier CSS de votre thème enfant. Editez ce fichier et collez, par exemple, le code suivant en haut du fichier CSS :

@font-face {
    font-family: Arvo;  
    src: url(http://www.monsite.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	src: url(http://www.monsite.com/wp-content/themes/your-theme/fonts/Arvo-Regular.woff') format('woff'),
    font-weight: normal;  
}

N’oubliez pas de remplacer l’URL et le nom de la police par les vôtres. Vous pouvez ensuite utiliser cette typo via une CSS spécifique :

.h1 { 
font-family: "Arvo", Arial, sans-serif; 
}

 

Conclusion

Voilà, nous espérons que cet article vous été utile et vous aura fait gagner du temps. N’oubliez pas que 2-3 typo différentes suffisent sur votre site. Si vous en abusez, les performances du site en seront ralenties et votre référencement naturel un peu pénalisé.
Si cet article vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. Et n’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.