Yes You Web !

Publié le 3 novembre 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 fois 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 !

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 !

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 !

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

Copier

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

Copier

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 !

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 !

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

Copier

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 :

Copier

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 :

Copier

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 vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !