Sélectionner une page


Voulez-vous ajouter des polices personnalisées dans WordPress? Les polices personnalisées vous permettent d’utiliser une belle combinaison de différentes polices sur votre site Web pour améliorer la typographie et l’expérience utilisateur.

Non seulement les polices personnalisées ont fière allure, mais elles peuvent également vous aider à améliorer la lisibilité, à créer une image de marque et à augmenter le temps que les utilisateurs passent sur votre site Web.

Dans cet article, nous allons vous montrer comment ajouter des polices personnalisées dans WordPress à l’aide des méthodes Google Fonts, TypeKit et CSS3 @ Font-Face.

Ajouter des polices personnalisées dans WordPress

Noter: 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 Web. Nous vous montrerons également comment les charger correctement sans ralentir votre site Web.

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 personnalisées à utiliser dans WordPress

Auparavant, les polices étaient chères, mais plus maintenant. Il existe de nombreux endroits où vous pouvez trouver d’excellentes polices Web gratuites telles que: Google Fonts, azote, PoliceÉcureuil, et fonts.com.

Si vous ne savez pas comment mélanger et assortir les polices, essayez-le Paire de polices. Il aide les concepteurs à associer de belles polices Google.

Lorsque vous choisissez vos polices, gardez à l’esprit que l’utilisation d’un trop grand nombre de polices personnalisées ralentira votre site Web. Pour cette raison, vous devez choisir deux polices et les utiliser tout au long de votre conception. Cela apporte également de la cohérence à votre conception.

Didacticiel vidéo

Abonnez-vous à WPBeginner

Si vous n’aimez pas la vidéo ou préférez les instructions écrites, veuillez lire la suite.

Ajout de polices personnalisées dans WordPress via Google Fonts

Aperçu des polices Google

Google Fonts est la bibliothèque de polices la plus grande, gratuite et la plus utilisée par les développeurs de sites Web. Il existe plusieurs façons d’ajouter et d’utiliser des polices Google dans WordPress.

Méthode 1: Ajout de polices personnalisées à l’aide du plug-in Easy Google Fonts

Si vous souhaitez ajouter et utiliser des polices Google sur votre site Web, cette méthode est de loin la plus simple et recommandée pour les débutants.

La première chose à faire est d’installer et d’activer ce Polices google simples Brancher. Pour plus d’informations, consultez notre guide étape par étape à l’adresse Comment installer un plugin WordPress?.

Après l’activation, vous pouvez accéder à Apparence »Personnalisateur Page. Cela ouvrira l’interface utilisateur de personnalisation du thème en direct, qui affichera la nouvelle section Typographie.

Typographie du personnalisateur

Cliquez sur Typographie pour afficher différentes zones de votre site Web où vous pouvez appliquer des polices Google. Cliquez simplement sur « Modifier la police » dans la section que vous souhaitez modifier.

Paramètres de typographie

Dans la section Famille de polices, vous pouvez choisir n’importe quelle police Google que vous souhaitez utiliser sur votre site Web. Vous pouvez également choisir le style de police, la taille de la police, l’espacement, la marge, etc.

En fonction de votre sujet, le nombre de sections ici peut être limité et vous ne pourrez peut-être pas modifier directement les choix de police pour de nombreuses zones différentes de votre site Web.

Pour résoudre ce problème, le plugin vous permet également de créer vos propres contrôles et de les utiliser pour changer les polices de votre site Web.

Vous devez d’abord visiter Paramètres »Google Fonts Page et entrez un nom pour votre contrôle de police. Utilisez quelque chose qui vous aidera à comprendre rapidement où vous allez utiliser ce contrôle de police.

Section de contrôle des Écritures

Cliquez ensuite sur le bouton « Créer un contrôle de police » et vous serez invité à sélectionner des sélecteurs CSS.

Vous pouvez ajouter tous les éléments HTML que vous souhaitez cibler (par exemple h1, h2, p, blockquote) ou utiliser des classes CSS.

Vous pouvez utiliser Vérifier l’outil dans votre navigateur pour savoir quelles classes CSS sont utilisées par la zone particulière que vous souhaitez modifier.

Ajouter des sélecteurs CSS

Cliquez maintenant sur le bouton «Enregistrer le contrôle des polices» pour enregistrer vos paramètres. Vous pouvez créer autant de contrôleurs de polices que nécessaire pour différentes zones de votre site Web.

Pour utiliser ce contrôleur de police, vous devez aller Apparence »Personnalisateur et cliquez sur l’onglet Typographie.

Sous Typographie, vous verrez désormais également l’option « Typographie du sujet ». Cliquez dessus pour afficher vos contrôles de police personnalisés que vous avez créés précédemment. Vous pouvez maintenant simplement cliquer sur le bouton Modifier pour choisir les polices et l’apparence de ce contrôle.

Option pour la typographie du sujet

N’oubliez pas de cliquer sur le bouton Enregistrer ou publier pour enregistrer vos modifications.

Méthode 2: ajouter manuellement des polices Google dans WordPress

Cette méthode consiste à ajouter du code à vos fichiers de thème WordPress. Si vous ne l’avez pas déjà fait, consultez notre guide Copiez et collez du code dans WordPress.

Visitez le premier Bibliothèque de polices Google et choisissez une police que vous souhaitez utiliser. Cliquez ensuite sur le bouton d’utilisation rapide sous la police.

Sélectionnez les polices que vous souhaitez utiliser

La page des polices affiche les styles disponibles pour cette police. Sélectionnez les styles que vous souhaitez utiliser dans votre projet, puis cliquez sur le bouton de la barre latérale en haut.

Obtenez le lien sur l'intégration des polices

Ensuite, vous devrez accéder à l’onglet Incorporer dans la barre latérale pour copier le code d’intégration.

Il existe deux façons d’ajouter ce code à votre site WordPress.

Tout d’abord, vous pouvez simplement modifier le fichier header.php de votre sujet et coller le code avant cela <body> Étiqueter.

Cependant, si vous n’êtes pas familier avec l’édition de code dans WordPress, vous pouvez ajouter ce code à l’aide d’un plugin.

Installez et activez simplement Insérer des en-têtes et des pieds de page Brancher. Pour plus d’informations, consultez notre guide étape par étape à l’adresse Comment installer un plugin WordPress?.

Après l’activation, accédez à Paramètres »Insérer des en-têtes et des pieds de page Page et collez le code d’intégration dans le champ « Scripts dans l’en-tête ».

Ajoutez un code de police à votre site WordPress

N’oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer vos modifications. Le plugin va maintenant charger le code d’intégration de Google Font sur toutes les pages de votre site Web.

Vous pouvez utiliser cette police dans la feuille de style de votre thème comme suit:


.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

Pour des instructions plus détaillées, consultez notre guide Ajouter des polices Google dans WordPress Sujets.

Ajouter des polices personnalisées dans WordPress avec Typekit

Polices Adobe Typekit

Typekit à partir d’Adobe Fonts est une autre ressource gratuite et de premier ordre pour de superbes polices à utiliser dans vos projets de conception. Ils ont un abonnement payant ainsi qu’un plan gratuit limité dont vous pouvez profiter.

Créez simplement un compte Adobe Fonts et visitez la section de navigation des polices. De là, vous devez cliquer </> Bouton pour sélectionner une police et créer un projet.

Ajouter des polices Typekit à un projet

Ensuite, vous verrez le code d’intégration avec votre ID de projet. Vous apprendrez également à utiliser la police dans le CSS de votre thème.

Vous devez copier et coller ce code dans la section Votre site web.

Code intégré pour les polices Typekit

Il existe deux façons d’ajouter ce code à votre site WordPress.

Tout d’abord, vous pouvez simplement modifier le fichier header.php de votre sujet et coller le code avant cela <body> Étiqueter.

Cependant, si vous n’êtes pas familier avec l’édition de code dans WordPress, vous pouvez ajouter ce code à l’aide d’un plugin.

Installez et activez simplement Insérer des en-têtes et des pieds de page Brancher.

Après l’activation, accédez à Paramètres »Insérer des en-têtes et des pieds de page Page et collez le code d’intégration dans le champ « Scripts dans l’en-tête ».

Ajout de Typekit via Adobe Fonts dans WordPress

C’est tout, vous pouvez maintenant utiliser la police Typekit que vous avez sélectionnée dans la feuille de style de votre thème WordPress comme ceci:


h1 .site-title { 
font-family: gilbert, sans-serif;
} 

Pour des instructions plus détaillées, consultez notre tutoriel Ajoutez une typographie incroyable dans WordPress avec Typekit.

Ajout de polices personnalisées dans WordPress à l’aide de CSS3 @ font-face

Le moyen le plus simple d’ajouter des polices personnalisées dans WordPress est d’ajouter les polices à l’aide de CSS3 @font-face Méthode. Avec cette méthode, vous pouvez utiliser la police de votre choix sur votre site Web.

La première chose à faire est de télécharger la police de votre choix dans un format Web. Si vous ne disposez pas du format Web de votre police, vous pouvez l’utiliser pour la convertir Générateur de polices Web FontSquirrel.

Une fois que vous avez les fichiers de polices Web, vous devrez les télécharger dans le vôtre Hébergement WordPress Serveur.

Le meilleur endroit pour télécharger les polices est dans un nouveau dossier Polices dans votre thème ou Thème des enfantsAnnuaire.

Vous pouvez Utiliser FTP ou gestionnaire de fichiers de votre cPanel pour télécharger la police.

Après avoir téléchargé la police, vous devez télécharger la police dans la feuille de style de votre thème en utilisant la règle CSS3 @ font comme suit:


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

N’oubliez pas de remplacer la famille de polices et l’URL par les vôtres.

Après cela, vous pouvez utiliser cette police dans la feuille de style de votre thème comme suit:


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

Charger des polices directement avec CSS3 @ font-face n’est pas toujours la meilleure solution. Si vous utilisez une police de Google Fonts ou Typekit, il est préférable de servir la police directement à partir de leur serveur pour de meilleures performances.

Nous espérons que cet article vous a aidé à ajouter des polices personnalisées dans WordPress. Vous pouvez également consulter notre guide sur la façon de le faire Utiliser des polices de symboles dans WordPress et comment Changer la taille de la police dans WordPress.

Si vous avez apprécié cet article, veuillez vous abonner au nôtre chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.





Source link

Recent Posts