Vous souhaitez ajouter des polices personnalisées à WordPress ? Les polices personnalisées vous permettent d'utiliser une belle combinaison de polices différentes sur votre site web afin d'améliorer la typographie et l'expérience de l'utilisateur. En plus d'être esthétiquement agréables, les polices personnalisées peuvent vous aider à améliorer la lisibilité, à créer une identité de marque et à augmenter le temps que les utilisateurs passent sur votre site WordPress.
Dans cet article, vous apprendrez à utiliser la fonction Polices de caractères GoogleetTypeKit répondre en chantant CSS3 @Font-Face pour ajouter des polices personnalisées dans WordPress.
Ajouter des polices personnalisées dans WordPress
Attention :Le chargement d'un trop grand nombre de polices peut ralentir votre site web. Nous vous recommandons de choisir deux polices et de les utiliser sur votre site. Nous vous montrerons également comment les charger correctement sans ralentir votre site.
Avant de voir comment ajouter des polices personnalisées dans WordPress, voyons comment trouver des polices personnalisées que vous pouvez utiliser.
Comment trouver des polices de caractères personnalisées pour WordPress
Il existe aujourd'hui de nombreux endroits où l'on peut trouver d'excellentes polices de caractères gratuites pour le web, comme Google Fonts, Typekit, FontSquirrel et fonts.com.
Ajouter des polices personnalisées à WordPress à partir de Google Fonts
Google Fonts est la bibliothèque de polices de caractères la plus importante, la plus gratuite et la plus utilisée par les développeurs web. Il existe de nombreuses façons d'ajouter et d'utiliser les polices Google Fonts dans WordPress.
Méthode 1 : Ajouter les polices Google avec un plugin WordPress
Si vous souhaitez ajouter et utiliser les polices Google Fonts sur votre site web, cette méthode est la plus simple et recommandée pour les débutants.
- Installation des plug-ins: :
- Installation et activation Google Fonts Typographie Plug-ins.
- Configuration des plug-ins: :
- Une fois activé, entrez votre adresse e-mail pour recevoir le guide de démarrage rapide officiel. Ensuite, cliquez sur Font Plugins → Custom Fonts dans la barre latérale d'administration. Cela vous amènera automatiquement dans le personnalisateur de thème de WordPress et ouvrira la nouvelle fenêtre "Plug-ins de polices"Partie.
- Sélectionner la police: :
- Dans la section Paramètres de base, sélectionnez les polices par défaut pour le site et dans la section Paramètres avancés, sélectionnez les polices pour des parties spécifiques du site.
- Utilisez le menu déroulant "Famille de polices" pour sélectionner une nouvelle police. L'aperçu changera automatiquement pour montrer l'effet de la police.
- Changements d'affectation: :
- Lorsque vous êtes satisfait de vos choix de polices personnalisées, cliquez sur "poste"pour enregistrer vos modifications.
Méthode 2 : Ajouter manuellement les polices Google dans WordPress
Cette méthode nécessite l'ajout d'un code dans le fichier du thème WordPress.
- Sélectionner la police: :
- Visitez la bibliothèque Google Fonts et sélectionnez la police que vous souhaitez utiliser. Cliquez sur le bouton "Quick Use" situé sous la police, sélectionnez le style que vous souhaitez utiliser et copiez le code d'intégration.
- Ajouter un code: :
- Modifier le thème de la
header.phpet collez le code dans le fichier<body>Avant d'étiqueter ou d'utiliser le plugin WPCode, collez le code intégré dans la case "En-tête" et cliquez sur "Enregistrer les modifications".
- Modifier le thème de la
- Utilisation des polices de caractères: :
- Utilisez cette police dans la feuille de style du thème, par exemple :
.site-title { font-family : 'Open Sans', Arial, sans-serif ; }Ajouter des polices personnalisées à WordPress avec Typekit
Typekit d'Adobe Fonts est une autre ressource gratuite de haute qualité qui propose de superbes polices à utiliser dans vos projets de conception.
- créer un compte: :
- Créez un compte Adobe Fonts et accédez à la section Parcourir les polices. Sélectionnez la police et créez un projet en copiant le code d'intégration avec l'ID du projet.
- Ajouter un code: :
- Modifier le thème de la
header.phpet collez le code dans le fichier<body>Avant d'étiqueter ou d'utiliser le plugin WPCode, collez le code intégré dans la case "En-tête" et cliquez sur "Enregistrer les modifications".
- Modifier le thème de la
- Utilisation des polices de caractères: :
- Utiliser la police Typekit sélectionnée dans la feuille de style du thème, par exemple :
.site-title { font-family : 'gilbert', sans-serif ; }Ajouter des polices personnalisées à WordPress avec CSS @font-face
La manière la plus simple d'ajouter des polices personnalisées à WordPress est d'ajouter la police @font-face en utilisant la méthode CSS. Cette méthode vous permet d'utiliser n'importe quelle police sur votre site web.
- Télécharger les polices: :
- Téléchargez vos polices préférées au format web. Si vous ne disposez pas d'un format web approprié, vous pouvez utiliser le générateur de polices web FontSquirrel pour le convertir.
- Télécharger les polices: :
- Téléchargez les polices sur le serveur d'hébergement de WordPress, l'emplacement recommandé est le nouveau dossier "fonts" dans le répertoire du thème ou du thème enfant.
- Chargement des polices: :
- Utilisez la règle CSS @font-face pour charger les polices dans la feuille de style du thème, par exemple :
@font-face { font-family : 'Arvo' ; src : url('http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf') ; font- weight : normal ; }- Utilisation des polices de caractères: :
- Utilisez cette police n'importe où dans la feuille de style du thème, par exemple :
.site-title { font-family : 'Arvo', Arial, sans-serif ; }Le chargement direct des polices à l'aide de CSS @font-face n'est pas toujours la meilleure solution. Par exemple, si vous utilisez Polices de caractères Google peut-être Typekit il est préférable d'utiliser les polices directement à partir de leurs serveurs pour obtenir de meilleures performances.
rendre un verdict
L'ajout de polices personnalisées peut améliorer considérablement l'aspect visuel et l'expérience utilisateur de votre site WordPress. Les polices peuvent être facilement personnalisées à l'aide des méthodes Google Fonts, Typekit et CSS@font-face.
