Comment ajouter des polices personnalisées sur un site Web WordPress [2022]

Savez-vous quelle est la partie centrale de votre conception de sites Web ? L'ajout d'une police personnalisée à un site Web WordPress est l'étape ultime que vous pouvez prendre pour garder les visiteurs de votre site Web sur votre site et améliorer la lisibilité du site Web. La police que vous choisissez pour le site Web représente votre image de marque. Plongeons-nous pour en savoir plus sur les polices personnalisées avec les tenants et les aboutissants.

Même si vous trouverez des polices gratuites en ligne, vous serez limité à les utiliser en fonction de la compatibilité de votre thème. C'est pourquoi nous allons vous expliquer comment ajouter des polices personnalisées dans WordPress à l'aide de méthodes manuelles et de plugins WordPress.

Pourquoi utiliser des polices personnalisées et où les trouver ?

Comme mentionné ci-dessus, vous trouverez de nombreux sites à partir desquels vous pourrez facilement télécharger des polices. Par exemple, Font Squirrel est livré avec jusqu'à trois polices gratuites que vous pouvez utiliser. Google Fonts est une autre option étonnante où vous trouverez plus de 900 polices parmi lesquelles choisir. En dehors de cela, Edge Web Fonts peut également vous offrir une grande variété de polices. Pour un usage personnel, vous pouvez opter pour Fonts.com ou 1001 Free Fonts .

DaFont est la plus ancienne bibliothèque de polices qui compte plus de 60 000 polices de caractères à partir desquelles vous pouvez filtrer les polices de votre choix. Vous devez télécharger les polices choisies et n'êtes pas comme l'intégration de Google Font. Un type similaire de bibliothèque de polices est UrbanFont avec une vaste gamme de polices créatives et lucratives.

Adobe Fonts ou Typekit est une bibliothèque de polices très pratique pour tous les concepteurs Web, car elle propose plus de 1900 polices. Même si vous vous abonnez au compte gratuit, il propose toujours plus de 200 polices Web.

Si vous souhaitez louer des polices sur une base mensuelle et payer un abonnement, vous pouvez opter pour Fontstand . Il propose environ 2000 polices étonnantes et vous facture mensuellement. Tout comme ce Type Network est une autre bibliothèque de polices auto-hébergée où vous obtiendrez plus de 400 familles de polices à la fois et explorerez facilement.

Comment choisir la meilleure police personnalisée pour un site Web ?

Comme vous connaissez déjà les ressources pour trouver les polices personnalisées souhaitables pour WordPress, vous devez savoir comment choisir les meilleures polices maintenant. Le filtrage des polices aléatoires rendra votre processus de sélection long et maladroit. Au lieu de cela, vous pouvez essayer les étapes suivantes tout en choisissant la meilleure police personnalisée pour un site Web WordPress. Dans ce blog, nous allons explorer Google Fonts pour choisir les meilleures polices et voir les meilleures pratiques tout en filtrant toutes les polices.

Liste des polices que vous aimez – Dans la police Google, vous pouvez facilement rechercher la police souhaitée dans le champ de recherche et définir la catégorie. Le résultat de la recherche sera modifié en fonction de votre ajustement. Vous pouvez voir les polices dans les alphabets, les nombres numériques et d'autres formats.

Vérifier les détails de la police - Il est important de vérifier les détails de la police car vous verrez tous les styles et tailles de police disponibles en un coup d'œil. Un avantage incroyable que vous trouverez avec Google Fonts est qu'il affiche les associations populaires avec cette police.

Lors de la vérification des détails de la police, gardez également un œil sur le format de la police. Parce que toutes les polices ne prennent pas en charge tous les systèmes de navigateur. Voici la dernière liste des navigateurs et la liste des formats de police pris en charge.

Source – https://www.w3schools.com/Css/css3_fonts.asp

Enrichissez votre collection de polices - Lorsque vous avez terminé de filtrer les bonnes polices, vous pouvez ajouter ces polices à votre collection en cliquant simplement sur le bouton " Sélectionner cette police" .

Méthodes simples pour ajouter une police personnalisée au site Web WordPress

Nous avons rassemblé quelques-unes des façons les plus simples d'ajouter des polices personnalisées à votre site Web dans un format étape par étape. Plongeons-nous et voyons comment le faire.

Comment ajouter manuellement une police personnalisée dans WordPress

L'ajout manuel de polices personnalisées est le moyen le plus judicieux de ne pas ralentir votre site Web. Comme vous avez déjà exploré certaines des tailles de police pour trouver la police souhaitée, téléchargez d'abord la police. Vous devez maintenant télécharger la police sur votre compte d'hébergement de site Web. Vérifiez quel thème vous utilisez pour votre site WordPress. Téléchargez le fichier CSS de votre police sur votre compte. Lors du téléchargement de la police, n'oubliez pas d'extraire les fichiers du fichier .zip.

Pour télécharger votre fichier de police, allez dans le répertoire wp-content/themes/your-theme/fonts. Vous pouvez créer un dossier de polices séparé pour votre commodité. Téléchargez le fichier à l'aide du gestionnaire de fichiers sur hPanel. Accédez maintenant à votre compte WordPress et cliquez sur l' option Apparence . Choisissez l'éditeur de thème où vous verrez le fichier style.css. Ajoutez le code suivant au bas du code.

@ font-face {

famille de polices : Aguafina Script-Regular ;

src : URL ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf ) ;

poids de la police : normal ;

}

Cliquez maintenant sur le bouton « Mettre à jour le fichier » pour enregistrer les modifications. Gardez à l'esprit que le code font-face charge la police chaque fois qu'un visiteur accède à votre site. La police de caractères, cependant, n'a encore été appliquée à aucun élément. Vous devez modifier le même fichier style.css pour attribuer une police à un élément spécifique. Le code suivant, par exemple, ferait en sorte que le titre de notre site Web utilise le script de police.

.site-titre {

famille de polices : "Aguafina Script-Regular" , Arial, sans empattement ;

}

Comment définir des polices personnalisées à l'aide de plugins WordPress

Pour tous les utilisateurs de WordPress, l'utilisation de plugins de polices est le moyen le plus simple de définir des polices personnalisées. Nous avons présenté ici certains des plugins de polices les plus simples et les plus utiles pour ajouter des polices personnalisées sur le site Web WordPress.

WP Google Fonts

Vous pouvez utiliser des polices personnalisées et les appliquer à certains éléments CSS à l'aide du plugin WP Google Fonts . Installez le plug-in WP Google Fonts à partir du répertoire des plug-ins WordPress et utilisez votre tableau de bord WordPress pour accéder au panneau de configuration des polices Google. Vous pouvez choisir des polices de caractères et ajuster des options telles que le style de police, les éléments alloués, etc.

Plug-in de polices

Fonts Plugin est une alternative freemium à Easy Google Fonts qui fonctionne de manière similaire, vous permettant d'intégrer en douceur les polices Google dans vos pages sans avoir à changer de thème. Il fonctionne également avec le Customizer, vous permettant d'essayer d'autres options de police avant de les publier. Fonts Plugin intègre également Adobe Fonts, ce qui est un bonus. Le plugin de polices vous permet également d'utiliser la bibliothèque de polices de caractères d'Adobe dans votre matériel.

Créer un site Web attrayant à l'aide de polices personnalisées

La lisibilité et l'élégance de votre texte ont un impact sur le plaisir de navigation de vos visiteurs sur votre site. Tout le monde peut désormais choisir parmi un grand nombre de polices de caractères à utiliser sur son site Web. Il n'y a aucune raison pour que vous utilisiez une ancienne police sur votre site Web de nos jours. La personnalisation de votre typographie WordPress est désormais entièrement sous votre contrôle.

Si vous trouvez ce blog engageant et utile, abonnez-vous à notre blog pour lire plus de blogs comme celui-ci. Rejoignez également notre communauté pour partager vos réflexions.