Comment ajouter des polices personnalisées à un site web WordPress

Souhaitez-vous découvrir comment ajouter des polices personnalisées à un site web WordPress ?

Pourquoi rendre votre blog ennuyeux en utilisant des polices standard ? Laissez votre blog parler de votre personnalité vibrante et des sujets que vous couvrez avec une grande variété de polices personnalisées. Les polices personnalisées sont une fonctionnalité intéressante qui permet à votre blog de paraître préférable aux autres.

Regardons les choses en face; nous aimons tous les blogs et les sites web avec les bonnes polices. Ils décorent non seulement le site web, mais aident également à attirer l’utilisateur vers votre contenu. Cependant, le choix des polices WordPress standard est limité et dépend du thème que vous utilisez. La bonne nouvelle est que vous pouvez les ajouter manuellement ou avec des plugins WordPress spécialisés.

Et ici, deux questions se posent: où obtenir des polices personnalisées pour WordPress et comment installer des polices personnalisées sur votre site web.

Découvrons-le.

Pourquoi devrais-je utiliser des polices personnalisées ?

L’époque où Times New Roman et Georgia étaient considérés comme les seules polices de caractères pour les textes sur les sites Web est révolue. Au cours des dernières années, l’espace des polices a complètement changé avec l’avènement de polices telles que Google Fonts et autres.

Aujourd’hui, il existe des centaines de polices gratuites, d’aides à l’information et à la formation, ainsi que de ressources conçues pour la conception, disponibles sur Internet. Contrairement à Adobe Illustrator, Photoshop et d’autres applications classiques, WordPress ne vous donne pas un contrôle total sur les polices par défaut. Seuls certains thèmes WordPress choisissent de prendre en charge et d’utiliser des polices personnalisées.

Par conséquent, dans cet article, vous apprendrez à trouver des polices personnalisées appropriées et à les utiliser sur votre site web WordPress.

L’importance d’utiliser des polices personnalisées

Pourquoi changer les polices, le retrait entre les mots, l’interligne, l’espacement des lettres ou la saturation des polices, demandez-vous ? Quoi qu’il en soit, certaines études prouvent que la typographie améliore la compréhension de la lecture.

Beaucoup dépend de la construction des polices. À un niveau conscient et subconscient – tout le monde évalue le contenu d’une page Web par sa conception.

La conception des polices affecte les lecteurs, même s’ils n’y prêtent pas attention. Abandonner la conception de la police signifie abandonner le développement lui-même ! L’humeur du lecteur en dépend. La police facilite la lecture ou oblige les utilisateurs à quitter la page.

Tous les navigateurs Web incluent un ensemble de polices par défaut. Cela signifie que si la police n’est pas spécifiée dans le CSS de la page, la version standard sera utilisée. Vous pouvez toujours utiliser les polices par défaut, mais elles compliquent le travail des utilisateurs. C’est pourquoi il est essentiel d’utiliser une police personnalisée. Si votre thème WordPress ne vous donne pas d’options pour changer la police, de nombreux sites Web et outils peuvent vous aider.

Google Fonts Alternatives

Beaucoup d’entre vous connaissent les polices Google. Il y a beaucoup plus de sites web où vous pouvez trouver de belles polices. Certaines d’entre elles sont gratuites pour un usage personnel. Si vous avez besoin d’un usage commercial, vous aurez besoin d’une licence. Google Fonts et Adobe Edge Fonts sont gratuits. C’est pourquoi ils ne sont pas si uniques.

Voici quelques autres ressources pour trouver des polices à usage gratuit et commercial :

1. TemplateMonster — Sur le site Web de TemplateMonster, vous trouverez tout ce dont vous avez besoin pour la conception Web. Il existe également de nombreuses polices et packs de polices pour un usage personnel pour un petit prix. En outre, Pour vous aider à choisir, toutes les polices présentées sur des brochures ou des cadres. Chaque police est également présentée avec une licence commerciale.
2. MyFonts — MyFonts offre actuellement le plus grand choix de polices au monde. Cependant, les prix ici sont également dans le segment supérieur. Donc, si vous avez un budget serré, ce n’est peut-être pas pour vous.
3. FontSpring — Fontspring vend des polices de fantaisie à usage commercial. Mais dans presque toutes les familles, 1-2 polices gratuites peuvent être utilisées à des fins personnelles. En outre, il existe une section séparée avec des polices gratuites. La collection est vibrante. Mais vous devrez étudier attentivement les informations de licence pour une police particulière avant de télécharger.
4. Cufonfonts — Il s’agit également d’une vaste collection de polices différentes. Sélectionnez n’importe laquelle, et vous verrez une page avec des informations détaillées à ce sujet. Il y a beaucoup de polices gratuites, et elles sont divisées en sections individuelles. Le système de tri sur CufonFonts est assez flexible et pratique. En outre, la prise en charge de Webfont est incluse.
5. Dafont — Une autre collection accessible de 3 500 polices gratuites. La plupart d’entre elles sont conçues pour un usage personnel uniquement. Une fonctionnalité intéressante DaFont est un système de catégories. Vous pouvez sélectionner des polices dans le style des bandes dessinées, des jeux vidéo, vintage etc….

Le choix des polices est très tentant car elles sont toutes belles. Mais vous ne devriez pas choisir beaucoup. N’utilisez pas plus de deux polices sur un site web. Ensuite, l’apparence de votre site Web sera cohérente. Une fois que vous avez choisi vos polices, assurez-vous de télécharger les fichiers pour chaque style que vous utiliserez (normal, gras, italique, etc.).

Maintenant que vous avez sélectionné la police appropriée pour votre site web, découvrons comment l’ajouter.

Comment ajouter des polices personnalisées à WordPress

Il existe plusieurs façons d’ajouter des polices à un site web WordPress :

1. Plugins : dans ce cas, différents plugins WordPress sont utilisés pour faciliter le processus.
2. Manuellement : en utilisant cette méthode, vous avez besoin d’un téléchargement de police téléchargé sur le site et de modifier le fichier CSS.
3. Thèmes: de nombreux thèmes populaires proposent des options intégrées pour personnaliser vos polices (note – nous ne couvrirons pas cette option car le processus variera en fonction du thème que vous utilisez.

Option 1 – Changer les polices WordPress avec des plugins

Si nous ne nous soucions pas des changements globaux, nous pouvons installer des plugins WordPress qui changeront les polices sur votre site web.

Caractéristiques des plugins de polices personnalisées

Les logiciels open source ont un avantage pour l’intérêt de la communauté, et WordPress a également cet avantage. Plusieurs plugins WordPress vous permettent d’ajouter des polices personnalisées. Comment choisir un plugin approprié lorsqu’il y’en a autant ? Quelles sont les fonctionnalités des plugins WordPress de polices personnalisées ?

Voici quelques points à prendre en compte :

• Possibilité d’utiliser une police personnalisée
• Possibilité d’utiliser plusieurs polices
• En-têtes et composants cibles
• Bonus : la possibilité de modifier les paramètres de police à partir de l’éditeur visuel

C’est tout. La première caractéristique de la liste est très importante. Vous pouvez toujours télécharger des polices à partir de sites web comme DaFont, Font Squirrel, etc., mais vous devez pouvoir les téléverser sur WordPress.

Regardons quelques plugins pour WordPress qui vous permettent de téléverser des polices personnalisées.

1. Better Font Awesome

Ce plugin WordPress permettra à ses utilisateurs de combiner automatiquement la dernière version des polices Better Font Awesome avec le CSS, les shortcodes et bien plus encore. En outre, ce plugin WordPress se met à jour automatiquement.

Vous y trouverez comme fonctionnalités : des mises à jour régulières, un générateur de shortcodes, la compatibilité avec d’autres plugins WordPress,  etc…

Télécharger | Démo | Hébergement Web

2. Google Fonts for WordPress

Ce plugin WordPress se compose de 877 polices spéciales, qui vous permettront d’utiliser toutes les polices sur vos sites Web WordPress. Grâce à sa prévisualisation en temps réel, il vous permettra de voir à quoi ressemblera votre site web dès que la police sera appliquée. 

De plus, vous serez capable de la sauvegarder et de la modifier sur le frontend quand vous trouverez la combinaison que vous apprécierez.

Ses fonctionnalités sont entre autres : une prévisualisation en temps réel, un référencement assez avancé, le support du multilingue, la prise en charge de plus de 870 + Google Fonts, des mises à jour faciles et bien plus encore.

Télécharger | Démo | Hébergement Web

3. Fonts Plugin

Fonts Plugin est un plugin WordPress gratuit qui permet aux utilisateurs d’accéder aux bibliothèques Google Fonts et Adobe Fonts. Avec ce plugin WordPress, vous pouvez choisir parmi plus de 1000 polices Google et Adobe, utiliser plusieurs polices sur votre site web et tester différentes options avec la fonction de prévisualisation en temps réel du plugin dans le customizer WordPress.

Pour plus de façons de personnaliser la typographie de votre site Web, comme la taille de la police, l’espacement des lettres et la hauteur des lignes, vous pouvez passer à la version premium, Fonts Plugin Pro.Télécharger | Démo | Hébergement Web

4. Easy Google Fonts

Easy Google Fonts est l’un des meilleurs plugins WordPress pour personnaliser la typographie de votre site web. Comme Fonts Plugin, il vous permet de choisir parmi des centaines de polices Google et de les prévisualiser dans le Customizer avant de les ajouter à votre site web.

Bien qu’il permette d’accéder à un plus petit nombre de polices Google, il est unique en ce sens qu’il vous permet de créer des contrôles et des règles de police personnalisés dans la zone d’administration, qui apparaîtront immédiatement dans le personnalisateur WordPress.

Télécharger | Démo | Hébergement Web

Option 2 – Installer manuellement les polices personnalisées WordPress

Grâce à la directive @font-face, vous pouvez connecter une ou plusieurs polices à votre site web. Mais cette méthode a ses avantages et ses inconvénients.

Avantages:

• Grâce au CSS, vous pouvez connecter des polices de n’importe quel format: ttf, otf, woff, svg.
• Les fichiers de polices seront situés sur votre serveur – vous ne dépendrez pas de services tiers.

Inconvénients :

• Pour la connexion de police correcte pour chaque style, vous devez enregistrer un code distinct.
• Sans connaître le CSS, vous pouvez être facilement confus.

Mais ce n’est pas un vrai problème si vous pouvez simplement copier un code fini et où vous devez spécifier vos valeurs.

Remarque : Avant de commencer, assurez-vous de créer un thème enfant pour votre site web. De cette façon, vous pouvez apporter toutes les modifications à votre thème enfant, en laissant votre thème principal afin que vous puissiez facilement le mettre à jour si nécessaire à l’avenir.

Étape 1 : Créer un dossier « polices »

Dans votre thème enfant, créez un nouveau dossier « polices » sous : wp-content/themes/votre-theme-enfant/fonts

Étape 2. Téléversez les fichiers de police téléchargés sur votre site Web

Cela peut être fait via le panneau de contrôle de votre hébergement ou via FTP.

Ajoutez tous les fichiers de polices au dossier polices nouvellement ajouté : wp-content/themes/Dans votre thème enfant, créez un nouveau dossier « polices » sous : wp-content/themes/votre-theme-enfant/fonts que vous avez créé.

Étape 3. Importer des polices via la feuille de style du thème enfant

Ouvrez le fichier style.css de votre thème enfant et ajoutez le code suivant au début du fichier CSS (après le commentaire du thème enfant) :

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

Où MyWebFont est le nom de la police et la valeur de la propriété src (les données entre parenthèses entre guillemets) est leur emplacement (liens relatifs). Nous devons spécifier chaque style séparément.

Puisque nous connectons d’abord le style normal, nous définissons les propriétés font-weight et font-style sur normal.

Étape 4. Lorsque vous ajoutez des italiques, écrivez ce qui suit :

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Lorsque tout est identique, nous sommes les seuls à attacher la propriété style de police à l’italique.

Étape 5. Pour ajouter la police en gras, ajoutez le code suivant :

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Où nous définissons la propriété font-weight sur bold.

N’oubliez pas d’indiquer l’emplacement correct des fichiers de police pour chaque style.

Étape 6. Pour connecter des italiques gras, tapez ce qui suit :

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Eh bien, c’est tout. Maintenant que vous avez connecté quatre styles de police à votre site Web.

Mais il y a une remarque : cette connexion de police ne s’affichera pas correctement dans Internet Explorer 8. La consolation est qu’il y a très peu de gens qui utilisent encore IE8.

Autres ressources recommandées

Nous vous invitons aussi à consulter les ressources ci-dessous pour aller plus loin dans la prise en main et le contrôle de votre site web et blog.

• 10 plugins WordPress d’accordéon pour un site web
• Comment ajouter plusieurs colonnes dans WordPress
• Quelques plugins pour intégrer des services Google sur votre blog
• 5 plugins WordPress pour afficher des notifications
• Comment utiliser des arrière-plans différents sur WordPress

Conclusion

Quelle est la première chose que les utilisateurs remarquent lorsqu’ils visitent votre site web ? C’est vrai, son design ! La plupart de la conception repose sur l’utilisation appropriée de belles polices. Vous devez donc vous occuper de la conception de la police de votre site web. Ajoutez du code ou utilisez l’un des plugins mentionnés ci-dessus pour intégrer un nouveau style de police. La façon dont vous la choisissez dépend de vous.

Assurez-vous de ne pas utiliser plus de deux polices sur le même site web. Étant donné que plus vous ajoutez de polices personnalisées au site web, plus la vitesse du site web baissera.

C’est tout pour cet article qui vous montre comment ajouter des polices personnalisées à un site Web WordPress. Nous vous invitons à essayer. Si vous avez un quelconque souci, ou une suggestion, faites-nous-en part dans les commentaires.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

En attendant, partagez cet article sur vos différents réseaux sociaux.   

…