Comment ajouter des polices personnalisées à votre site WordPress (3 méthodes)

La typographie est plus importante que la plupart des gens l’accordent. Les polices que vous utilisez ont non seulement un impact sur la présentation de votre site Web, mais peuvent également le différencier des autres sites et faciliter la lecture de votre contenu. Choisir les mêmes polices que tout le monde peut être une valeur sûre, mais il peut être intéressant d’ajouter des polices personnalisées à WordPress.

Bien que WordPress inclue une grande variété d’options de polices prêtes à l’emploi, il existe de nombreux moyens d’améliorer cette sélection. Si vous savez comment inclure des polices personnalisées sur votre site Web, vous pourrez choisir parmi des milliers d'options intéressantes. Cela vous permettra de trouver une police qui correspond à votre créneau et à votre public.

Comprendre ce que sont les polices personnalisées (et pourquoi vous voudrez peut-être les utiliser)

Le terme «polices personnalisées» est assez large. Puisque nous parlons de WordPress, nous l’utiliserons pour faire référence à n’importe quel type de caractère. système de gestion de contenu (CMS) n'inclut pas hors de la boîte. Il y a milliers des options de polices personnalisées que vous pouvez trouver en ligne et, d’une manière générale, rien ne vous empêche de les utiliser.

Gardez à l’esprit, cependant – le les polices que vous choisissez ne devrait pas être simplement esthétique. Ils devraient également répondre à certains critères supplémentaires:

Outre ces considérations techniques, les polices vous offrent un moyen supplémentaire d’exprimer le style de votre site. Ils peuvent devenir partie intégrante de votre image de marque et, avec le temps, les utilisateurs pourraient éventuellement les associer à votre site et à votre entreprise. Vous voudrez donc examiner vos choix très attentivement.

Où trouver des polices personnalisées pour votre site WordPress

Si vous effectuez une recherche rapide de «polices gratuites» à l’aide d’un moteur de recherche, vous trouverez des centaines de pages avec une vaste sélection parmi lesquelles choisir:

Le problème, cependant, est que bon nombre de ces sites Web utilisant des polices de caractères gratuites n’ont généralement pas de normes élevées en matière de conservation de leurs sélections. Vous pourrez peut-être trouver des bijoux, mais dans de nombreux cas, ils seront également remplis de polices que vous ne seriez pas pris au dépourvu, même si vous travailliez sur un profil MySpace 2005.

Heureusement, il y a beaucoup d'excellents référentiels de polices qui faire se donne beaucoup de mal pour organiser ses collections. Un de nos favoris est Google Fonts, qui propose plus de 900 familles de polices en plusieurs langues, toutes gratuites:

Une autre excellente option est Polices Adobe (anciennement Typekit), qui propose plus de 1 700 familles de polices. N'oubliez pas cependant que pour y accéder, vous aurez besoin d'un Nuage créatif abonnement (n'importe quel niveau fera l'affaire). Si vous êtes un utilisateur Adobe, cela signifie que vous avez déjà accès à la collection complète de polices:

Ces deux sources à elles seules vous donneront beaucoup d'options à choisir. Lorsque vous effectuez votre sélection, n'oubliez pas que chaque police que vous choisissez doit s’intégrer au reste du style de votre site et être facile à lire. Une fois que vous avez trouvé quelques polices que vous aimez, il ne vous reste plus qu’à les ajouter à votre site Web.

Comment ajouter des polices personnalisées à votre site WordPress (trois méthodes)

En ce qui concerne les polices personnalisées, WordPress vous propose plusieurs manières d'implémenter les options de votre choix. Examinons ce que chacun implique pour vous permettre de choisir la méthode qui vous convient le mieux.

1. Editez le fichier de votre thème

Si vous ne souhaitez pas télécharger manuellement les fichiers de polices sur votre site Web, vous pouvez toujours les «importer» à partir de référentiels tiers. Avec Google Fonts, par exemple, vous pouvez ouvrir n’importe quelle page de police et cliquer sur Sélectionnez cette police en haut de l'écran:

Une fois que vous faites cela, un nouveau menu apparaîtra qui comprend deux extraits de code. Le premier devrait ressembler à ceci:

Ce code doit être placé dans le étiquettes de le thème de votre enfant header.php fichier. Vous pouvez le trouver dans le dossier de votre thème dans public_html / wp-content / themes annuaire.

Avec cette ligne, vous dites à WordPress d’importer l’option que vous avez sélectionnée dans Google Fonts. Toutefois, pour l’utiliser, vous devez également ouvrir la feuille de style de votre thème enfant et spécifier les éléments devant tirer parti de votre nouvelle police. Voici à quoi ce code devrait ressembler:

famille de polices: 'Roboto', sans-serif;

Rappelez-vous que la feuille de style de votre thème enfant doit se trouver dans le même répertoire que son répertoire. header.php fichier. Cela signifie que vous pouvez prendre en charge les deux tâches au même endroit et mettre en place de nouvelles polices en quelques minutes seulement.

2. Téléchargez le fichier de votre police dans le dossier de votre thème.

Si vous êtes tout à propos de optimisation des performances, le téléchargement direct de fichiers de polices sur votre site Web peut vous permettre de gagner quelques millisecondes sur vos temps de chargement. La première chose dont vous aurez besoin, bien sûr, est le fichier de police que vous souhaitez télécharger sur votre serveur:

WordPress n’incluant pas de logiciel dédié les polices dossier, vous voudrez en créer un en utilisant votre fidèle client FTP. Vous pouvez ajouter le dossier où vous voulez, mais nous vous recommandons de le placer dans votre des thèmes répertoire afin que vous puissiez en garder une trace. Configurez-le maintenant et chargez votre fichier de police dans le nouveau dossier:

Une fois le fichier en place, ouvrez la feuille de style de votre thème enfant. Vous devez maintenant appeler cette police pour pouvoir l'utiliser, via un extrait qui devrait ressembler à ceci:

@ font-face {
famille de polices: New Font;
src: url (http://www.votresiteweb.com/wp-content/themes//fonts/votre-nouvelle-font.ttf);
poids de la police: normal;
}

Notez que le nom de famille et l’URL de la police ci-dessus sont des espaces réservés que vous devrez remplacer par les informations appropriées.

Une fois que vous avez entré ce code, ne fermez pas encore la feuille de style de votre thème. Vous devez toujours configurer les éléments qui utiliseront la nouvelle police, avec un code très similaire à ce que nous avons vu dans la dernière section:

.h1 site-title {
famille de polices: "New Font", Arial, sans-serif;
}

Dans cet exemple, nous configurons nos sous-positions H1 pour utiliser la nouvelle police. Toutefois, vous pouvez le remplacer par n’importe quel autre élément de votre choix, ou par plusieurs éléments si vous souhaitez utiliser la police à plusieurs endroits.

3. Utilisez un plugin

Comme c'est souvent le cas, le moyen le plus simple d'implémenter de nouvelles fonctionnalités dans WordPress consiste à installer un plugin. Lorsque vous utilisez des polices personnalisées, vous avez le choix parmi de nombreuses options.

Par exemple, si vous souhaitez utiliser Google Fonts, nous vous recommandons le plug-in Google Fonts for WordPress. Après avoir activé cet outil, vous pourrez choisir parmi tout le catalogue de Google Fonts pour vos pages et vos publications, sans avoir besoin d'ajouter de code à votre site Web:

D'autre part, si vous souhaitez utiliser n'importe quel fichier de police et ne pas vous limiter à un seul référentiel, Custom Fonts est l'outil que vous devriez consulter:

Avec ce plugin, vous pouvez télécharger des polices sur votre site Web directement à partir du tableau de bord, et utiliser le customizer pour choisir où et quand les utiliser. L’un ou l’autre de ces plugins facilite l’ajout de nouvelles polices personnalisées sur votre site.

Conclusion

Si vous portez une attention particulière aux polices utilisées par les sites Web, vous remarquerez que nombre d’entre elles se contentent des mêmes choix qui ont fait leurs preuves. Certaines polices sont une valeur sûre en ce qui concerne la lisibilité et la accessibilité de l'utilisateur. Cependant, avec des milliers d’options parmi lesquelles choisir – gratuites et payantes – il vaut la peine de rechercher celle qui correspond également au style et au public de votre site Web.

Pour ce qui est de télécharger des polices personnalisées sur WordPress, vous pouvez le faire en utilisant trois approches différentes:

Avez-vous des questions sur les types de polices à utiliser sur votre site Web? Parlons d’eux dans la section commentaires ci-dessous!