Comment ajouter des polices personnalisées à WordPress en toute simplicité
Publié: 2015-05-22Ajouter plus de polices à votre ordinateur est assez simple. Téléchargez simplement les fichiers dans votre répertoire de polices, puis vous pourrez commencer à les utiliser dans les logiciels et applications de votre choix.
Cependant, si vous souhaitez utiliser des polices personnalisées sur votre site Web, en particulier les polices de caractères que vos visiteurs n'ont peut-être pas installées sur leurs appareils, cela devient un peu plus compliqué.
Heureusement, en tant qu'utilisateur de WordPress, il existe d' excellents outils gratuits que vous pouvez utiliser pour ajouter des polices individuelles ou toute une bibliothèque à votre site Web. Une fois que vous avez rendu les polices disponibles pour votre thème, vous pouvez commencer à les appliquer aux différents styles utilisés sur votre site Web.
Dans cet article, nous vous montrerons où vous pouvez trouver des polices gratuites et premium de haute qualité, comment les ajouter à votre site Web WordPress, ainsi que quelques outils pour vous aider à choisir les bons paramètres pour chaque police de caractères sur votre site Web.
Où trouver des polices pour votre site Web
Avant d'aborder les instructions expliquant comment ajouter des polices personnalisées à votre site Web WordPress, examinons certains des endroits où vous pouvez trouver de nouvelles polices de caractères pour modifier l'apparence du texte sur votre site.
Il existe d'excellentes ressources en ligne gratuites, où vous pouvez trouver des polices open source qui peuvent être utilisées librement sur votre site Web. Certaines ressources que vous aimeriez explorer incluent :
- Google Fonts : parcourez plus de 600 polices open source optimisées pour le Web. L'utilisation de ces polices sur votre site Web WordPress est très simple, comme nous le verrons bientôt.
- Font Squirrel : un autre grand référentiel de polices gratuites.
- Edge Web Fonts : une collection de polices Web gratuites optimisée par Adobe Typekit.
- Typekit : une collection professionnelle de plus de 4 000 polices gratuites et premium d'Adobe, à utiliser sur le Web et sur papier.
Comme vous pouvez le voir, il existe de nombreuses sources en ligne légitimes de polices gratuites et premium que vous pouvez utiliser pour personnaliser l'apparence de votre site Web WordPress.
Outils de typographie pour les concepteurs Web
Choisir le bon ensemble de polices pour votre site Web peut être difficile. Le processus ne se limite pas à choisir une ou deux polices que vous aimez, puis à les ajouter à votre site Web.
Non seulement vous devez tenir compte de l'apparence de la police, mais également de la taille que vous choisirez, de la largeur de la zone de contenu de votre site et de la hauteur de ligne optimale pour chaque police.
Heureusement, il existe des outils en ligne gratuits que vous pouvez utiliser pour vous aider à appliquer correctement les polices que vous avez choisies. Cela garantit alors que votre contenu a l'air le meilleur .
Une ressource en ligne que vous devriez absolument consulter lors de la personnalisation des polices de votre site Web est le calculateur de typographie du nombre d'or. Cet outil de typographie, du gars derrière Thesis Framework, vous permet d'entrer une taille de police, suivie de la largeur de votre zone de contenu. L'outil calculera ensuite les paramètres typographiques parfaits pour la configuration spécifique de votre site Web.
L'échelle de type est un autre outil en ligne qui permet d'établir facilement la taille des différents styles de texte sur votre site Web les uns par rapport aux autres. Après avoir entré votre taille de police de base, comme la taille du texte du paragraphe sur votre site, vous saurez alors à quelle taille chacun des différents titres doit être défini.
Il existe un certain nombre d'échelles parmi lesquelles choisir, y compris le nombre d'or ci-dessus. Une fois que vous êtes satisfait des paramètres, vous pouvez rapidement copier le CSS pour l'utiliser sur votre propre site Web.
Plugins de polices personnalisées WordPress
Tout comme il existe de nombreux endroits pour trouver des polices en ligne, il existe également de nombreuses façons de les intégrer à votre site Web WordPress. Cependant, pour vous aider à démarrer le plus rapidement possible , voici quelques-uns des meilleurs plugins liés aux polices WordPress :
Polices Google faciles
Easy Google Fonts est un plugin gratuit qui vous permet d'utiliser l'une des plus de 600 polices gratuites du référentiel Google sur votre site Web WordPress. Le plugin fonctionne avec l'outil WordPress Customizer. Cela vous permet de prévisualiser vos modifications avant de prendre une décision finale sur les polices à utiliser sur votre site.
Après avoir installé et activé le plugin sur votre site Web, vous pouvez commencer à modifier les polices utilisées par votre thème WordPress actuel. Pour ce faire, rendez-vous sur l'outil WordPress Customizer et cliquez sur la section Typographie.
Prêt à l'emploi, le plugin vous permet de modifier les paramètres de typographie pour les principaux styles utilisés par votre thème. Cela pourrait inclure le paragraphe et les titres individuels. Cependant, via la page des paramètres Easy Google Fonts, vous pouvez créer des contrôles de police personnalisés . Ceux-ci sont ensuite ajoutés à l'interface de personnalisation, ce qui vous permet de modifier facilement la police utilisée par des éléments tels que des listes, des citations, etc.
Après avoir ajouté un contrôle de police personnalisé, vous pouvez y accéder à partir des paramètres de typographie du thème sur le personnalisateur.
En utilisant cette fonctionnalité du plugin, vous pouvez ensuite modifier les polices utilisées par l'un des éléments ou styles de votre thème WordPress. Les contrôles ajoutés au Customizer couvrent également l'épaisseur de la police, la décoration du texte et les propriétés de transformation, ainsi que la couleur de la police, la couleur d'arrière-plan, la taille, la hauteur de ligne et l'espacement des lettres.

En combinant les contrôles de police personnalisés avec les paramètres détaillés proposés, le plugin Easy Google Fonts ouvre tout un monde de possibilités lorsqu'il s'agit de modifier l'apparence du texte sur votre site Web WordPress, le tout sans avoir besoin de modifier directement le code.
Utiliser n'importe quelle police
Le plugin Easy Google Fonts ci-dessus est fortement recommandé. Cependant, il a un inconvénient : vous ne pouvez utiliser que les polices de la collection Google Fonts. Si aucune de ces 686 polices ne vous plaît, ou si vous souhaitez utiliser une police de caractères personnalisée , le plugin Use Any Font, tout aussi gratuit, est une bonne alternative.
Après avoir installé et activé le plugin, vous pouvez télécharger une ou plusieurs polices sur votre site Web, directement depuis votre ordinateur. Cependant, avant de commencer, vous devez vous inscrire pour la clé API gratuite (ou faire un don), qui connectera le plugin à l'outil de conversion de polices.
Une fois que vous avez téléchargé au moins une police, vous pouvez ensuite l'attribuer aux éléments spécifiques de votre site Web. Cela inclut la liste des éléments par défaut, ainsi que tous les éléments personnalisés que vous définissez.
Le plugin ajoute également des contrôles de police à l'éditeur de publication WordPress . Cela facilite la modification des polices utilisées dans vos publications et pages, sur une base individuelle, plutôt que globalement.
Après avoir attribué une police, vous pouvez voir les modifications apportées à votre typographie en visitant le front-end de votre site Web. Bien que les contrôles de ce plugin ne se comparent pas à ceux proposés par le plugin Easy Google Fonts, si vous souhaitez simplement changer les polices utilisées par les éléments spécifiques de votre thème en une police personnalisée de votre choix, alors Use Any Font fait joliment le travail.
Polices Typekit pour WordPress
Si vous souhaitez utiliser les polices gratuites et premium du service Adobe Typekit sur votre site Web WordPress, le plugin gratuit Typekit Fonts for WordPress est fait pour vous.
Avec ce plugin, vous pouvez soit utiliser les sélecteurs prédéfinis, soit ajouter vos propres règles CSS personnalisées . Cela garantit que quelle que soit la partie de votre site Web que vous souhaitez personnaliser avec une police Typekit, vous êtes libre de le faire avec ce plugin.
Ajouter manuellement des polices personnalisées à WordPress
Si, pour une raison quelconque, l'idée d'utiliser l'un des plugins gratuits ci-dessus ne vous plaît pas, vous pouvez toujours modifier manuellement les polices utilisées sur votre site Web WordPress. Si la police que vous souhaitez utiliser se trouve dans le référentiel Google Fonts, l'ajouter à votre site Web est très simple.
Tout ce que vous avez à faire est de sélectionner la police sur le site Web de Google, puis de copier le code correspondant dans la section d'en-tête et la feuille de style CSS de votre site Web.
Cependant, si la police de votre choix n'est pas hébergée dans un référentiel tel que Google Fonts, où vous pouvez simplement créer un lien vers celle-ci, vous devrez alors héberger la police vous-même. Cela modifie légèrement le processus et ajoute quelques étapes supplémentaires, telles que le téléchargement de la police sur votre serveur.
Vous pouvez télécharger le fichier de police à l'aide du logiciel FTP ou de l'outil de gestion de fichiers dans le panneau de configuration de votre hébergeur. C'est une bonne idée de télécharger la police dans un répertoire de polices dédié , de préférence dans votre dossier de thème enfant pour aider à garder les choses organisées.
Une fois le fichier de police sur votre serveur, ouvrez le fichier de feuille de style CSS de vos thèmes pour le modifier. Cela peut être fait depuis votre tableau de bord d'administration WordPress, sur l'écran Apparence > Éditeur.
Une fois que vous avez ajouté le CSS ci-dessus à la feuille de style pour charger la police, vous pouvez ensuite l'utiliser n'importe où dans ce fichier CSS pour modifier l'apparence du texte comme ci-dessous :
Pour des raisons de performances, dans la mesure du possible, vous devez essayer de créer un lien vers un référentiel de polices externe tel que Google Fonts. Cependant, si vous ne trouvez pas la police que vous souhaitez utiliser en ligne, vous devrez peut-être sacrifier une partie de la vitesse de votre page en hébergeant vous-même le fichier.
Conclusion
J'espère que vous savez maintenant où trouver des polices personnalisées, ainsi que comment commencer à les ajouter à votre site WordPress. En utilisant l'un des plug-ins gratuits, tels que Easy Google Fonts, vous pouvez commencer à modifier non seulement les polices utilisées sur votre site Web, mais également la manière dont ces polices sont présentées .
Grâce à l'outil WordPress Customizer, vous pouvez désormais facilement modifier l'apparence du texte sur votre site Web. Tout cela se déroule à travers un ensemble de menus visuels, avec un aperçu en direct.
Si votre thème actuel ne vous donne pas beaucoup de contrôle sur les polices utilisées sur votre site, en utilisant l'une des méthodes ci-dessus, vous disposez désormais d'un moyen simple d'apporter ces modifications, sans modifier vous-même le CSS sous-jacent.
Quelles sont vos polices préférées ? Quels paramètres de typographie de votre site Web souhaitez-vous modifier ? Si vous avez des questions sur les polices, la typographie ou WordPress en général, veuillez les partager dans les commentaires ci-dessous.