Comment ajouter des polices WordPress personnalisées (et choisir des polices associées)

Publié: 2019-04-04

Vous cherchez un moyen d'ajouter vos propres polices WordPress personnalisées à votre site ?

Votre thème WordPress est probablement livré avec son propre ensemble de polices parmi lesquelles vous pouvez choisir, mais les options peuvent être assez limitées, il est donc tout à fait compréhensible que vous souhaitiez ajouter vos propres polices WordPress à la place.

Dans cet article, vous apprendrez comment télécharger et utiliser n'importe quelle police dans WordPress via quelques méthodes différentes.

Au cas où vous ne seriez pas familiarisé avec l'idée d'utiliser vos propres polices WordPress, nous commencerons par une introduction rapide sur où trouver des polices personnalisées et comment les associer.

Ensuite, nous vous montrerons comment ajouter des polices WordPress personnalisées à partir de :

Polices Google
Polices Adobe (Typekit)
Littéralement ailleurs ! (en téléchargeant un fichier de police et en utilisant CSS3 @font-face)

Cliquez sur ce lien pour accéder directement aux tutoriels.

Où trouver des polices personnalisées pour WordPress

L'endroit le plus connu pour trouver des polices WordPress personnalisées est certainement Google Fonts. Chez Google Fonts, vous trouverez un référentiel de plus de 900 polices, toutes gratuites et très faciles à intégrer dans votre site WordPress grâce au CDN de Google.

Après Google Fonts, une autre option bien connue est Adobe Fonts ( anciennement appelée Typekit ). Les polices Adobe sont incluses sans frais supplémentaires dans le cadre de l'abonnement Creative Cloud d'Adobe, mais elles ne sont pas disponibles pour les non-abonnés.

Enfin, vous pouvez trouver de nombreux autres sites qui regroupent des polices gratuites et premium. Deux de nos favoris sont :

Font Squirrel – collecte des polices 100 % gratuites à des fins commerciales.
Fonts.com – possède une grande collection de polices premium.

Comment associer des polices pour que votre site soit génial

En règle générale, vous n'utiliserez pas une seule police sur votre site WordPress. Au lieu de cela, la plupart des sites utilisent des paires de polices pour créer un design plus intéressant et aider à différencier le contenu.

Cependant, vous ne voulez pas simplement mélanger au hasard deux polices - cela pourrait ne pas sembler trop chaud.

Au lieu de cela, vous avez besoin de deux polices qui fonctionnent ensemble, ce qui, si vous n'êtes pas un concepteur , peut être difficile à comprendre.

Pour vous aider, il existe de nombreux sites intéressants qui vous proposeront des paires de polices. Par exemple, si vous trouvez une police que vous aimez absolument , vous pouvez utiliser l'un de ces sites pour en trouver une paire. Certains de nos favoris sont :

Paire de polices
Fontjoy
Typ.io

Bien qu'il n'y ait aucune règle disant que vous ne pouvez utiliser que deux polices, vous devez vous méfier d'utiliser trop de polices WordPress. Au-delà du potentiel de création d'un design chaotique, l'utilisation d'un trop grand nombre de polices personnalisées peut également ralentir les temps de chargement de votre site.

Comment ajouter des polices WordPress personnalisées : guides pas à pas

Maintenant, pour la partie amusante, voici comment commencer à utiliser vos propres polices WordPress personnalisées.

Il existe quelques itinéraires que vous pouvez emprunter ici en fonction de l'endroit où vous souhaitez vous procurer vos polices.

Voici les trois méthodes que nous allons couvrir. Encore une fois, vous pouvez cliquer sur un lien pour accéder directement à un didacticiel spécifique :

Ajouter des polices Google dans WordPress (plugin, manuel ou méthodes d'hébergement local)
Ajouter des polices Adobe (Typekit) dans WordPress
Utilisez CSS3 @font-face pour télécharger et ajouter n'importe quelle police dans WordPress

Comment ajouter des polices Google à WordPress

Parce que Google Fonts est la source la plus populaire pour les polices WordPress personnalisées, nous allons couvrir trois manières différentes d'ajouter des polices Google à WordPress :

Ajouter des polices Google à partir du CDN de Google avec un plugin
Ajouter manuellement des polices Google à partir du CDN de Google
Hébergez Google Fonts localement dans WordPress avec un plugin

Comment ajouter des polices Google dans WordPress à l'aide d'un plugin

En raison de la popularité de Google Fonts, vous pouvez trouver plusieurs plugins de qualité qui facilitent l'ajout de Google Fonts à WordPress, notre préféré étant Easy Google Fonts car c'est :

Libérer
Poids léger
Facile à utiliser

Une fois que vous avez installé et activé le plugin, accédez à Apparence → Personnaliser dans votre tableau de bord WordPress pour lancer le personnalisateur WordPress en temps réel.

Ensuite, cliquez sur l'option Typographie pour choisir vos options Google Fonts :

À partir de là, vous pouvez utiliser les options pour choisir une police personnalisée pour chaque élément de votre site :

Par exemple, voici à quoi cela ressemble de changer la police de paragraphe :

Au-delà du choix de la police elle-même, le plugin vous permet également de personnaliser :

Poids de la police
Décoration de texte
Couleurs

Si vous connaissez un peu le CSS, vous pouvez également utiliser la fonction Contrôles de police du plugin pour regrouper certains éléments. Par exemple, vous pouvez combiner des sélecteurs d'en-tête pour cibler tous vos en-têtes à la fois.

Pour configurer cela, accédez à Paramètres → Google Fonts et créez un nouveau contrôle de police pour cibler des sélecteurs CSS spécifiques :

Comment ajouter des polices Google dans WordPress sans plugin

Étant donné que Google héberge toutes ses polices sur son propre CDN, il est également assez facile d'ajouter manuellement des polices Google à WordPress.

Fondamentalement, au lieu d'avoir à télécharger les fichiers de polices sur votre serveur, vous pouvez simplement vous connecter au CDN hébergé de Google et Google se chargera de vous fournir les polices.

Certaines personnes n'aiment pas faire cela pour des raisons de performances - je vais partager un moyen d'héberger localement des polices Google dans la section suivante, si vous le souhaitez .

Pour commencer, vous devez utiliser le site Web de Google Fonts pour choisir la police que vous souhaitez ajouter.

Pour cet exemple, disons que vous souhaitez utiliser Roboto .

Allez sur la page de la police et cliquez sur + Sélectionner cette police :

Cela ajoutera une fenêtre dans le coin inférieur droit. Cliquez pour agrandir cette fenêtre.

Si vous souhaitez choisir des poids de police supplémentaires ( par exemple pour le gras et l'italique ), vous pouvez aller dans l'onglet Personnaliser . Pour un bon équilibre entre convivialité et performances, nous vous recommandons de choisir trois graisses de police au maximum absolu :

Ordinaire
Italique
Audacieux

Vous pouvez même en utiliser moins si vous voulez les meilleures performances .

Une fois vos choix faits, retournez dans l'onglet Intégrer et copiez le code Embed Font :

Ensuite, vous devez ajouter ce code à la section <head> de votre thème WordPress. Vous pouvez le faire en :

Éditer directement le fichier header.php de votre thème enfant ( assurez-vous d'utiliser un thème enfant - sinon, vos polices personnalisées disparaîtront lorsque vous mettez à jour votre thème )
Utilisation d'un plugin gratuit comme Insérer des en-têtes et des pieds de page

Une fois que vous avez ajouté le code, vous pouvez commencer à utiliser Google Fonts dans votre CSS.

Si vous revenez sur le site Web de Google Fonts, Google vous indiquera en fait les règles CSS que vous devez utiliser :

Par exemple, pour que vos balises h2 utilisent votre nouvelle police Roboto, vous pouvez aller dans Apparence → Personnaliser → CSS supplémentaire et ajouter l'extrait suivant :

h2 {

font-family : 'Roboto', sans-serif ;

}

Comment héberger des polices Google localement dans WordPress avec un plugin

Voici la dernière méthode pour Google Fonts !

Certaines personnes préfèrent héberger les polices Google localement plutôt que de les charger à partir du CDN de Google. Autrement dit, plutôt que de les charger à partir d'un lien tel que "https://fonts.googleapis.com/css?family=Roboto:400,700", vous pouvez héberger les fichiers sur votre propre serveur.

Le moyen le plus simple de le faire est d'utiliser un plugin gratuit appelé CAOS pour les polices Web.

Une fois que vous avez installé et activé le plugin, vous pouvez aller dans Paramètres → Optimiser les polices Web pour choisir les polices que vous souhaitez télécharger sur votre serveur :

Une fois que vous avez fait cela, vous pouvez commencer à utiliser la ou les polices dans votre CSS ( comme si vous suiviez la méthode précédente ).

Comment ajouter des polices Adobe (Typekit) dans WordPress

Si vous souhaitez utiliser les polices Adobe dans WordPress, vous pouvez essentiellement suivre les mêmes étapes que la méthode manuelle des polices Google. N'oubliez pas que le service Adobe Fonts n'est disponible que dans le cadre de l'abonnement Creative Cloud .

Pour commencer, vous devrez utiliser le site Web d'Adobe Fonts pour choisir vos polices et créer un projet Web ( instructions détaillées ici ).

Dans la fenêtre Ajouter des polices au projet Web , vous pouvez choisir les polices à inclure :

Ensuite, Adobe vous fournira un code d'intégration, tout comme Google Fonts :

Prenez ce code d' intégration et ajoutez-le à votre site en utilisant soit le fichier header.php de votre thème enfant, soit un plugin comme Insérer des en-têtes et des pieds de page.

Une fois que vous avez lié le fichier CSS, vous pouvez utiliser le CSS fourni par Adobe pour commencer à appliquer la police aux sélecteurs CSS de votre site :

Comment utiliser @font-face dans WordPress

Enfin, la dernière méthode que nous allons vous montrer est comment utiliser @font-face dans WordPress. La bonne chose à propos de cette méthode est qu'elle fonctionnera avec littéralement n'importe quel fichier de police de n'importe quelle source .

Fondamentalement, tant que vous pouvez télécharger le fichier de police et avoir les droits de l'utiliser, CSS3 @font-face le fera.

Pour commencer, téléchargez le fichier de police à partir de votre source préférée. Pour cet exemple, nous utiliserons une police gratuite de Font Squirrel appelée Alex Brush .

Si possible, essayez de télécharger le fichier aux formats de fichier .woff ou .woff2 pour la meilleure compatibilité entre navigateurs. Si ce n'est pas possible, vous pouvez télécharger votre police dans un format différent, puis utiliser l'outil gratuit FontSquirrel Webfont Generator pour la convertir en .woff :

Ensuite, connectez-vous au serveur de votre site WordPress via FTP ou cPanel File Manager. Puis…

Créez un nouveau dossier nommé fonts dans le répertoire de votre thème actif ou de votre thème enfant ( certains thèmes peuvent déjà avoir un dossier de polices . Si tel est le cas, vous pouvez ignorer cette étape ).
Téléchargez le fichier de polices dans le dossier des polices . Vous pouvez télécharger les formats .woff et .woff2

Une fois que vous avez téléchargé les fichiers, accédez à Apparence → Personnaliser → CSS supplémentaire dans votre tableau de bord WordPress.

Tout d'abord, vous devez utiliser @font-face pour ajouter votre police…

Pour ce faire, entrez le nom de votre police en tant que famille de polices et ajoutez l'URL directe au fichier de police sur votre serveur en tant qu'URL . Voici à quoi cela ressemble pour notre exemple AlexBrush :

@font-face {

famille de polices : AlexBrush ;

src : url (http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff) ;

font-weight : normal ;

}

Une fois que vous avez fait cela, vous pouvez utiliser CSS pour appliquer votre famille de polices ( par le nom que vous avez enregistré avec @font-face ). Par exemple, voici à quoi ressemble l'utilisation de la police AlexBrush pour les en-têtes <h2> :

Et c'est tout! Vous pouvez utiliser cette méthode CSS3 @font-face pour littéralement n'importe quel fichier de police.

Réflexions finales sur les polices WordPress personnalisées

Si votre thème WordPress n'a pas les polices que vous souhaitez utiliser, pas de panique ! Vous disposez de nombreuses options pour ajouter vos propres polices WordPress personnalisées.

Le moyen le plus simple de commencer est d'utiliser les polices gratuites hébergées sur Google Fonts ou les options premium hébergées sur Adobe Fonts.

Cependant, vous n'êtes en aucun cas limité à ces services, et en utilisant CSS3 @font-face, vous pouvez télécharger littéralement n'importe quel fichier de police sur WordPress et commencer à l'utiliser dans votre thème.

Maintenant, lancez-vous et créez votre propre association de polices !