Comment ajouter des polices personnalisées à un thème WordPress

Les polices jouent un rôle majeur dans la conception, la lisibilité et parfois même la fonctionnalité de votre site Web. Choisissez le mauvais et vous pourriez ruiner ce qui est autrement un superbe site Web. De même, le style et la taille de la police peuvent dicter la facilité (ou non !) d'utilisation de votre site Web. Mais que faire si votre police idéale n'est pas disponible dans votre thème WordPress ? Dans cet article, nous verrons plusieurs façons d'utiliser la police personnalisée de votre choix.

Allons-y!

Pourquoi utiliser des polices personnalisées

De nombreux thèmes sont désormais livrés avec une sélection de polices parmi lesquelles vous pouvez choisir et qui sont "préparées". Ceux-ci sont dans de nombreux cas adaptés au site Web que vous concevez. Mais, si vous ne parvenez pas à sélectionner la bonne police avec les polices déjà proposées, il est temps de rechercher des polices alternatives, ce qui signifie que vous devez pouvoir ajouter vos polices personnalisées à votre site Web.

L'utilisation de polices personnalisées vous permet de profiter d'une belle combinaison de différentes polices sur votre site Web pour améliorer la typographie et l'expérience utilisateur. La recherche a montré qu'il y a des avantages significatifs à utiliser la bonne typographie. Cela inclut non seulement une amélioration de l'expérience utilisateur globale, mais également de la qualité du traitement des informations sur un site Web par le cerveau. Plus cela est facile, plus il est facile de communiquer votre offre/services commerciaux à vos clients.

Bien que l'utilisation de polices personnalisées puisse certainement améliorer la convivialité de votre site Web, il est important de ne pas devenir fou des polices ! Une sélection de deux polices soigneusement jumelées devrait suffire. Plus, et vous risquez de ralentir votre site Web.

Allons-y et examinons les options qui s'offrent à nous pour ajouter des polices personnalisées à notre site Web WordPress.

Ajouter des polices Google avec le plugin Google Fonts

Le moyen le plus simple et le plus populaire d'ajouter des polices personnalisées à votre site Web WordPress doit être d'utiliser le plugin Easy Google Fonts.

Après avoir installé et activé ce plugin, ouvrez votre personnalisateur de thème sous le menu Apparence > Personnaliser. Vous remarquerez que dans la barre latérale gauche, un nouveau menu déroulant en accordéon appelé Typographie a été ajouté.

Cliquez pour l'ouvrir et vous pourrez ensuite utiliser le bouton "Modifier la police" pour modifier rapidement les polices de votre site Web, ainsi que leur poids respectif, qu'elles soient en majuscules, etc. et plus encore. Vous pouvez également utiliser les propriétés CSS pour modifier davantage le style et le positionnement des polices que vous avez choisies.

De plus, vous pouvez même ajouter vos propres contrôles de police. Pour ce faire, rendez-vous sur la page des paramètres du plugin sous Paramètres> Google Fonts.

Créez un nouveau contrôle de police et définissez les sélecteurs CSS. Par exemple, nous définissons les classes .entry-title qui correspondent aux titres des publications de notre thème. Ensuite, lorsque vous visiterez à nouveau le personnalisateur, une nouvelle boîte sera disponible avec le nom spécifié pour que vous puissiez appliquer la personnalisation de la police aux titres des publications de la même manière que nous l'avons décrit ci-dessus. Facile!

Ajouter des polices Google manuellement

Si vous préférez ne pas utiliser de plugin mais que vous souhaitez tout de même profiter de l'utilisation de Google Fonts sur votre site Web WordPress, aucun problème. Ceux-ci peuvent être ajoutés manuellement assez facilement. Voyons comment. Bien sûr, il existe également un moyen manuel d'ajouter des polices Google à votre site Web.

La première étape:

Tout d'abord, vous devez obtenir le lien de votre police sur le site des polices Google.

Supposons que vous souhaitiez utiliser la famille de polices Roboto. Lorsque vous cliquez sur cette police, vous serez transféré sur sa page où vous pourrez prévisualiser n'importe quel texte pour vous assurer que la police vous convient. Sur le côté droit, vous verrez une boîte "Utiliser sur le Web" qui comprend le lien dont vous aurez besoin pour l'ajouter à votre site.

Pour mettre correctement Google Fonts en file d'attente dans WordPress, ouvrez le fichier functions.php de votre thème avec votre éditeur préféré et insérez le code suivant à la fin :

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Copiez l'URL fournie dans le texte du lien Google (commence par https://), puis remplacez-la dans le code ci-dessus (dans notre exemple, il s'agit actuellement de https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Ensuite, dans le fichier style.css de votre thème, utilisez la police de la même manière que vous le feriez avec n'importe quelle autre police, en suivant les "règles CSS pour spécifier les familles" fournies par Google.

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

Maintenant, dans le front-end de votre site, vous devriez voir la police Roboto appliquée aux zones où elle a été spécifiée dans votre fichier CSS.

Ajouter des polices Adobe

Une excellente alternative à Google Fonts sont les polices d'Adobe Fonts. Le plugin Custom Adobe Fonts vous aide à intégrer facilement ces polices dans votre site Web WordPress et fonctionne actuellement avec le thème Astra, le thème Beaver Builder, le plugin Beaver Builder et Elementor Page Builder.

Pour commencer, installez le plug-in, puis dirigez-vous vers la vaste bibliothèque de polices d'Adobe pour trouver une police qui vous convient (vous devrez vous inscrire pour vous connecter).

Il existe une tonne de façons de filtrer les polices et le système est assez intuitif à utiliser. Une fois que vous avez trouvé une police que vous aimez, cliquez dessus et regardez en haut à droite de la page où vous verrez qu'il est écrit "Ajouter au projet Web". Une boîte comme celle ci-dessous s'ouvrira. Donnez un nom à votre projet Web et sélectionnez les variantes de police que vous souhaitez y inclure.

Une fois que vous lui avez donné un nom et appuyé sur le bouton "Créer", vous serez redirigé vers l'écran suivant où un code d'intégration HTML et les règles CSS sont fournis. Vous avez maintenant deux choix. Vous pouvez soit a) continuer à utiliser le plug-in Custom Adobe Fonts, soit b) intégrer ces polices manuellement.

Utilisation du plug-in Adobe Fonts personnalisées

C'est le moyen le plus simple d'intégrer vos polices Adobe à votre site Web. Une fois que vous avez créé votre projet, cliquez sur 'Projets Web' et trouvez votre projet dans la liste. Vous verrez en haut qu'il y a un code "ID de projet" (comme indiqué ci-dessous). Maintenant, dirigez-vous vers les paramètres du plug-in d'Adobe Font et cliquez sur "Polices Typekit personnalisées" dans le menu. Entrez ensuite cet ID de projet dans cette case et enregistrez.

Vous verrez maintenant cette police répertoriée dans WordPress Customizer, Elementor ou tout autre constructeur de page compatible que vous utilisez. Sélectionnez et vous êtes prêt à partir.

Incorporation manuelle de polices personnalisées

L'intégration manuelle de vos polices Adobe se fait exactement de la même manière que celle décrite pour l'intégration des polices Google. Vous verrez un lien d'intégration de feuille de style fourni par Adobe (illustré ci-dessous) dans la vue d'ensemble du projet Web. Pour afficher les classes CSS, cliquez sur le texte "Modifier le projet" et ceux-ci sont fournis à côté de chaque style de police.

Comment trouver des polices personnalisées et les associer

Vous pouvez également trouver et télécharger la police idéale pour votre site et la charger à partir des dossiers de votre site Web, car il existe de nombreuses ressources proposant des polices gratuites ou premium dans une grande variété.

Vous pouvez également obtenir de l'aide de l'outil en ligne Font Pair, qui est idéal pour prévisualiser les combinaisons de polices afin que vous puissiez mélanger et assortir les polices comme bon vous semble. La façon dont il présente les paires de polices, il est également facile de découvrir d'autres suggestions d'appariement en naviguant.

Dans notre blog, vous pouvez également trouver deux excellents articles sur l'appariement des polices. Il y a le Guide de l'appariement des polices pour les concepteurs Web + 30 exemples étonnants ! au cas où vous voudriez en savoir plus sur l'appariement des polices en termes de conception avec un excellent conseil sur ce sur quoi vous devriez mettre l'accent et comment obtenir la meilleure lisibilité et la meilleure sensation. Vous trouverez plus de détails sur les outils de couplage de polices dans notre article 10 meilleurs outils de couplage de polices pour les concepteurs Web.

Charger des polices personnalisées à partir de dossiers

Bien que Google Fonts et Adobe Fonts offrent une sélection impressionnante parmi lesquelles choisir et un moyen facile de les utiliser sur votre site Web, ce n'est pas la seule option qui s'offre à vous dans votre quête de la police parfaite.

Il existe plusieurs excellents sites Web qui vendent des polices personnalisées qui ont été soigneusement créées par des designers. Font Squirrel, par exemple, offre une grande bibliothèque de polices et, plus important encore, il permet une utilisation commerciale et un format facile à mettre en œuvre pour ces polices. Il existe un mélange de polices gratuites et "premium" sur le site (qui doivent être payées).

Une excellente police que vous pourriez envisager de Font Squirrel est Fira Sans. Utilisons cela comme exemple pour savoir comment l'installer sur notre site Web WordPress pour l'utiliser.

Tout d'abord, cliquez sur l'onglet 'Webfont Kit'. Cochez la case 'WOFF' puis cliquez sur 'Télécharger le kit @Font-Face'.

Vous obtiendrez un fichier zip qui doit maintenant être extrait. Dans ce dossier, vous trouverez le fichier de police ainsi qu'un fichier stylesheet.css qui contient le code dont vous aurez besoin pour votre propre feuille de style CSS.

Pour l'OpenSans-ExtraBold-webfont par exemple, nous devons utiliser le CSS suivant :

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

Votre meilleur pari est de placer tous les fichiers de polices de tous les formats dans un répertoire approprié de votre choix sous votre dossier de thème. Dans notre exemple, il se trouve sous le dossier /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

Dans le même dossier, créez un fichier open-sans.css et placez-y tout le code CSS de chaque fichier stylesheet.css afin que son contenu ressemble à ceci :

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Cela aide également les différents navigateurs à sélectionner la police qu'il prend en charge. Si vous avez besoin de mettre en file d'attente le fichier CSS des polices à la manière de WordPress, vous devez le faire dans functions.php comme ceci :

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

N'oubliez pas de remplacer l'URL par le chemin vers votre fichier open-sans.css.

Conclusion

Le choix de la bonne police lors de la création de votre site Web a un impact significatif sur l'apparence et le fonctionnement de votre site Web. Avec autant de polices incroyables parmi lesquelles choisir, ne vous sentez pas obligé de vous en tenir uniquement aux polices fournies par votre thème. Espérons que cet article vous montre comment vous pouvez utiliser à peu près n'importe quelle police appropriée pour votre site Web WordPress !