Comment ajouter facilement des polices personnalisées à votre site Web WordPress

Choisir la bonne police pour votre site Web peut être une tâche longue et difficile. Il y a beaucoup de choses à considérer – quel type de style de police conviendra à l’essence de votre marque, combien de polices de caractères différentes vous devriez choisir, s’il faut jouer en toute sécurité ou opter pour quelque chose de plus unique et stimulant, et la liste est longue. Pourtant, le résultat final vaut généralement tous les tracas, car de bonnes polices peuvent avoir un impact significatif sur l’expérience utilisateur et, par conséquent, sur le succès global de votre page Web.

Maintenant, il est important de noter que nous parlons de polices personnalisées strictement du point de vue de WordPress. Cela signifie que nous n’utilisons pas le terme « police personnalisée » dans son sens le plus général, qui fait référence aux polices conçues spécifiquement pour un client. Au lieu de cela, nous faisons référence à toutes les polices qui ne sont pas incluses dans WordPress.

De nos jours, les polices personnalisées sont devenues une force omniprésente sur de nombreux sites WordPress. Pour cette raison, il existe de nombreux thèmes WordPress fournis avec des polices personnalisées. Cependant, avoir trop de polices personnalisées actives sur votre site peut avoir un impact négatif sur la vitesse de votre site Web. Heureusement, il existe un moyen d’éviter cela. Nous avons décidé de montrer comment ajouter des polices Web personnalisées à votre site WordPress sans le ralentir. Vous pouvez en savoir plus à ce sujet ci-dessous, ou vous pouvez regarder la vidéo à la place.

Trouver des polices personnalisées

Comme nous l’avons déjà mentionné, choisir les polices à utiliser pour votre site peut être difficile. Si vous ne savez pas comment vous y prendre, il existe des ressources de polices gratuites et sous licence sur le Web – Comme Écureuil de police, par exemple. Il s’agit d’un site Web où vous pouvez trouver des polices gratuites et de haute qualité sur tout le Web, et vous pouvez les utiliser à des fins personnelles et commerciales.

Mis à part Font Squirrel, Polices Google, Envato, fonts.com, et Espace de police ne sont que quelques-uns des nombreux autres endroits destinés à vous aider à trouver exactement ce que vous cherchez.

Lors de la création du site internet, les gens choisissent et combinent généralement deux polices différentes – un pour les titres, l’autre pour le corps du texte. Il n’est pas recommandé de choisir plus de deux polices, sauf si vous êtes un concepteur expérimenté, car cela peut rendre votre page désordonnée et ralentir le temps de chargement de votre page. Si vous ne savez pas quelles polices utiliser ensemble, Paire de polices peut vous aider à prendre une décision et à trouver la combinaison parfaite pour vous. Là, vous pouvez parcourir différentes suggestions de paires de polices, et vous pouvez voir instantanément les noms des polices en question, ainsi que la façon dont les deux ressembleront lorsqu’elles seront agencées ensemble. Vous avez aussi la possibilité de télécharger la paire de polices sur place. Le site vous permet de rechercher des paires de polices selon certains critères, tels que Paires en vedette, Serif/Sans Serif, Display/Sans Serif, etc.

Fontjoy est un autre site qui peut vous aider dans votre sélection de paires de polices. Il existe un bouton Générer sur lequel vous pouvez cliquer pour générer des polices et vous pouvez déterminer à quel point elles sont liées. De plus, si vous avez déjà choisi une police, vous pouvez en générer une autre et voir comment elle correspond à ce que vous avez sélectionné. La seule chose que vous avez à faire est cliquez sur l’icône de verrouillage à côté de la police souhaitée afin que le générateur de polices sache laquelle conserver et laquelle générer.

Utilisation de polices personnalisées avec les thèmes interactifs Qode

Si vous utilisez (ou prévoyez d’utiliser) l’un des thèmes WordPress premium de Qode Interactive, sachez qu’ils venir avec les polices Google déjà intégrées. Donc, si vous souhaitez utiliser n’importe quelle police Google de l’immense bibliothèque de polices de Google, vous n’avez pas à vous inquiéter.

Dans nos thèmes, vous pouvez retrouver les paramètres de police si vous accédez aux options du thème en question puis cliquez sur Polices.

Si vous souhaitez ajouter une autre police spécifique à votre thème, vous pouvez le faire en utilisant l’une des méthodes décrites dans la section « Ajout de polices WordPress personnalisées sans plugin » de cet article. D’un autre côté, si vous n’utilisez pas nos thèmes, mais que vous souhaitez tout de même avoir une police Google, vous pouvez découvrir comment le faire ci-dessous.

Comment ajouter des polices personnalisées à votre site Web WordPress en utilisant un plugin

L’ajout d’une police personnalisée à WordPress avec un plugin est simple. Nous allons vous montrer comment le faire avec deux plugins différents.

1. Typographie des polices Google

Ce plugin est livré avec des polices Google déjà intégrées, vous n’avez donc pas besoin d’en installer – il vous suffit de choisir celles que vous souhaitez utiliser.

Une fois que vous avez installé le Plugin de typographie Google Fonts, vous pouvez accéder à ses options en allant sur Apparence > Personnaliser > Google Fonts.

Il y a deux groupes de paramètres différents que vous pouvez utiliser – Paramètres de base et avancés.

Dans Paramètres de base, vous disposez de trois options différentes : Typographie de base, Typographie des en-têtes et Typographie des boutons et des entrées. Les Typographie de base L’option vous permet de choisir et de configurer la police de votre corps de texte (le texte qui apparaît le plus sur votre site). Les En-têtes Typographie l’option est de choisir la police pour tous vos titres, tandis que Typographie des boutons et des entrées vous permet de sélectionner une police de caractères pour vos champs de saisie et vos boutons.

Pour des options plus complètes, il existe également Réglages avancés. Une fois là-bas, vous pourrez sélectionner une police distincte pour chaque titre (telles que les polices pour le titre et la description du site, le titre et les sous-titres de la publication et de la page, la barre latérale et le pied de page).

Il y a aussi Version professionnelle du plugin, qui vient avec quelques autres options, comme la possibilité de personnaliser la taille de la police, la couleur et la hauteur de ligne, la possibilité d’optimiser les performances de votre site Web en ne chargeant que les poids de police que vous prévoyez d’utiliser, ainsi qu’en ajoutant les éléments personnalisés que vous souhaitez. que le plugin peut ajuster les paramètres en conséquence et les rendre plus personnalisés pour vos besoins.

2. Polices Google faciles

Une fois que vous avez installé le Plugin Google Fonts facile, rendez-vous sur Apparence > Personnaliser > Typographie > Typographie par défaut.

Ce plugin vous permet uniquement de modifier les polices des paragraphes et des en-têtes, mais pas de votre pied de page, de votre barre latérale et des autres sections de votre site Web. Cependant, vous pouvez configurer certaines fonctionnalités supplémentaires telles que l’épaisseur/le style de la police, la décoration du texte, la transformation du texte, la taille de la police, etc.

Même si vous ne pouvez modifier que les polices de vos paragraphes et titres, vous pouvez toujours insérer des parties de texte personnalisées dont vous voulez changer la police. Supposons, par exemple, que vous souhaitiez modifier la typographie des citations et des liens. Pour ce faire, il vous suffit d’insérer des champs personnalisés pour ces catégories. Nous allons vous montrer comment.

Aller à Paramètres > Polices Google.

Si vous voulez la même police pour les blockquotes et les liens, alors vous besoin de créer un contrôle de police. Vous pouvez le faire en entrant un nom dans le champ Nom du contrôle champ, puis en cliquant sur le Créer un contrôle de police bouton.

Alors vous devriez mettre les balises HTML pour les liens et les blockquotes dans le même contrôle de police (les balises sont blockquote et a). Une fois terminé, cliquez sur Enregistrer le contrôle des polices.

Une fois que vous aurez créé ce nouveau contrôle de police, vous obtiendrez des paramètres supplémentaires. Quand tu vas à Apparence > Personnaliser > Typographie, vous verrez un autre onglet appelé Thème Typographie. Vous trouverez ici tous les paramètres des balises que vous avez choisies.

Les paramètres que vous obtiendrez seront les mêmes que ceux des contrôles de police par défaut.

Ajouter des polices WordPress personnalisées sans plugin

Il existe des moyens d’ajouter manuellement des polices WordPress personnalisées, et c’est très simple à faire. Vous avez besoin de connaissances de base en CSS pour le faire, mais vous ne pouvez pas vous tromper si vous suivez ces étapes. Ci-dessous, nous vous montrerons deux méthodes différentes pour ajouter des polices WordPress personnalisées sans utiliser de plugin.

Méthode 1

Tout d’abord, allez sur Google Fonts et trouvez la police qui correspond le mieux à ce que vous avez en tête. Lorsque vous choisissez la police souhaitée, vous obtenez toutes les informations nécessaires pour l’intégrer dans votre page Web.

Puis, assurez-vous d’ajouter le code dans votre fichier header.php. Aller à Apparence > Éditeur de thème, recherchez le fichier header.php et ajoutez le code juste en dessous de la balise. Le code de la police Indie Flower que nous avons sélectionnée est le suivant :

<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">

Maintenant, vous devez trouver le fichier style.css. Pour y accéder, rendez-vous sur Apparence > Éditeur de thème dans votre tableau de bord et sélectionnez style.css. Là, vous définirez les éléments auxquels vous souhaitez appliquer la police. A savoir, si vous voulez une police spécifique pour l’en-tête H1, voici ce que vous insérerez dans le fichier style.css :

h1 {
font-family: ‘your font name goes here’, cursive;
}

Vous pouvez ajouter votre police à n’importe quelle section de votre site de la même manière. Il vous suffit de connaître le sélecteur CSS de l’élément dont vous souhaitez modifier la police.

Alternativement, il existe un autre endroit où vous pouvez définir où la police apparaîtra. Cliquer sur Personnaliser > CSS supplémentaire. De là, vous pouvez surveiller tous les changements sur place.

Méthode 2

La méthode la plus simple pour ajouter des polices personnalisées à WordPress est en utilisant CSS3 @font-face, qui vous permet d’utiliser la police de votre choix sur votre page Web. Tout d’abord, vous devez télécharger la police que vous souhaitez utiliser au format de fichier Web. Si vous n’avez pas le format, vous pouvez simplement le convertir avec Générateur de polices Web FontSquirrel.

Ensuite, vous devez télécharger vos fichiers de polices sur votre serveur d’hébergement. Vous pouvez soit téléchargez les fichiers dans le répertoire de votre thème enfant, soit dans un nouveau dossier dans le thème lui-même. Pour télécharger la police, vous pouvez utiliser FTP ou le gestionnaire de fichiers de cPanel.

Après avoir téléchargé la police, vous devez la charger dans la feuille de style CSS de votre thème. Pour ce faire, vous utiliserez la règle CSS3 @font-face :

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

Vous devez spécifier le nom de la police, son emplacement sur votre serveur et son poids de police. À partir de là, vous pouvez utiliser cette police n’importe où sur votre site via un simple CSS :

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

Conclusion

Et c’est ainsi que vous ajoutez des polices WordPress personnalisées à votre site. Comme vous pouvez le voir, il existe de nombreuses méthodes différentes que vous pouvez utiliser, et aucune d’entre elles n’est trop compliquée. Alors allez-y, choisissez une police (ou une paire de polices) qui vous plaît, ajoutez-la à votre site WordPress et commencez à la personnaliser pour rendre votre typographie belle, propre et remarquable.