Comment ajouter des polices personnalisées à votre site WordPress

Pourquoi rendre votre blog ennuyeux en utilisant des polices standard? Laissez votre blog parler de votre personnalité vibrante et des sujets que vous abordez 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.

Avouons-le; nous aimons tous les blogs et les sites avec les bonnes polices. Ils décorent non seulement le site, 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 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 WordPress.

Découvrons-le.

Pourquoi devrais-je utiliser des polices personnalisées?

L'époque est révolue où Times New Roman et la Géorgie étaient considérées comme les seules polices de texte des sites Web. 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'informations et de supports de formation, ainsi que des 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 choisissent de prendre en charge et d'utiliser des polices personnalisées.

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

L'importance d'utiliser des polices personnalisées

Pourquoi changer les polices, le retrait entre les mots, l'espacement des lignes, 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.

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

La conception des polices affecte les lecteurs, même s'ils n'y prêtent pas attention. Abandonner la conception des polices 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 ne vous donne pas d'options pour changer la police, de nombreux sites Web et outils peuvent vous aider.

Alternatives aux polices Google

Beaucoup d'entre vous connaissent les polices Google gratuites. Il existe de nombreux autres sites où vous pouvez trouver de belles polices. Certains d'entre eux sont gratuits pour un usage personnel. Si vous avez besoin d'une utilisation commerciale, vous avez besoin d'une licence. Les polices Google et les polices Adobe Edge sont gratuites. C'est pourquoi ils ne sont pas si uniques. Et cela ne nous convient pas.

Voici quelques-uns d'autres ressources pour trouver des polices pour une utilisation gratuite et commerciale:

1. TemplateMonster – Sur le site Web du marché TemplateMonster, vous trouverez tout ce dont vous avez besoin pour la conception Web. Il existe également de nombreuses polices et packs de polices à usage personnel pour un petit prix. Ils sont également présentés dans ONE kit de développement Web. La collection est immense et créative. Pour vous aider à choisir, toutes les polices présentées sur brochures ou cadres. Chaque police est également présentée avec une licence commerciale.
2. MyFonts – MyFonts propose actuellement la plus grande sélection 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 vibran. Mais vous devrez étudier attentivement les informations de licence pour une police particulière avant de télécharger.
4. Cufonfonts – C'est également une vaste collection de polices différentes. Sélectionnez-en un et vous verrez une page contenant des informations détaillées à ce sujet. Il existe de nombreuses polices gratuites et elles sont divisées en sections individuelles. Le système de tri sur CufonFonts est assez flexible et pratique. En outre, le support Webfont est inclus.
5. Dafont – Une autre collection accessible de 3 500 polices gratuites. La plupart d'entre eux sont conçus 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 ou stylisées en caractères japonais.

Le choix des polices est très tentant car elles sont toutes belles. Mais il ne faut pas trop choisir. Utilisation pas plus de deux polices sur le site. 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 le site, voyons comment l'ajouter.

Comment ajouter des polices personnalisées à WordPress

Il existe plusieurs façons d'ajouter des polices à un site 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 devez télécharger une police téléchargée sur le site et modifier le fichier CSS.
3. Thèmes: de nombreux thèmes populaires incluent des options intégrées pour personnaliser vos polices (remarque – nous ne couvrirons pas cette option car le processus variera en fonction du thème que vous utilisez, mais des thèmes premium de qualité comme le thème Total WordPress offriront en ligne documents que vous pouvez facilement suivre – comme ce guide pour ajouter des polices personnalisées à Total)

Option 1 – Modifier 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.

Caractéristiques des plugins de polices personnalisés

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 adapté avec autant de personnes? Quelles sont les fonctionnalités des plugins 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 fonctionnalité de la liste est très importante. Vous pouvez toujours télécharger des polices à partir de sites comme DaFont, Font Squirrel, etc., mais vous devez être en mesure de les télécharger sur WordPress.

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

Téléchargeur de polices personnalisées

Ce plugin vous permet de télécharger des polices Google et de les appliquer à divers éléments de votre blog. Par exemple, aux titres ou au corps de l'article ou de la page.

Utiliser n'importe quelle police

Il s'agit d'un plugin WordPress qui vous offre une interface pratique pour télécharger des polices et les utiliser directement via l'éditeur visuel. L'éditeur visuel WordPress peut changer automatiquement la police de n'importe quel texte. Ce plugin offre plusieurs fonctionnalités, ce qui rend le processus d'ajout de polices personnalisées beaucoup plus facile à gérer.

WP Google Fonts

WP Google Fonts vous permet d'utiliser le catalogue de polices Google. L'un des avantages incroyables de ce plugin est l'ajout de près de 1000 polices Google. Bien que vous puissiez mettre les polices Google en file d'attente manuellement, il est beaucoup plus facile d'utiliser un plug-in pour la plupart des utilisateurs.

Comment installer des polices avec un plugin?

Prenons par exemple WP Google Fonts. Installez simplement ce plugin à partir du référentiel WordPress officiel et ouvrez la section Google Fonts.

Vous verrez un panneau de contrôle des polices Google ici. Choisissez des polices et modifiez divers paramètres, tels que le style de police, les éléments auxquels il est appliqué, etc.

Option 2 – Installer manuellement les polices personnalisées WordPress

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

Avantages:

• Grâce à 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.

Les inconvénients:

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

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

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

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

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

Cela peut se faire via le panneau de contrôle de votre hébergement ou via FTP.

Ajoutez tous les fichiers de polices au dossier de polices nouvellement ajouté: wp-content / themes / votre-thème-enfant / polices 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 
famille de polices: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: format url ('fonts / WebFont.eot? #iefix') ('embedded-opentype'),
format url ('fonts / WebFont.woff') ('woff'),
format url ('fonts / WebFont.ttf') ('truetype'),
format url ('fonts / WebFont.svg # svgwebfont') ('svg');
poids de la police: normal;
style de police: 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. Lors de l'ajout italique, écrivez ce qui suit:

@ font-face 
famille de polices: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
format src: url ('fonts / WebFont-Italic.eot? #iefix') ('embedded-opentype'),
format url ('fonts / WebFont-Italic.woff') ('woff'),
format url ('fonts / WebFont-Italic.ttf') ('truetype'),
format url ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
poids de la police: normal;
style de police: italique;

Là où tout est le même, nous avons seulement attaché la propriété de style de police aux italiques.

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

@ font-face 
famille de polices: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
format src: url ('fonts / WebFont-Bold.eot? #iefix') ('embedded-opentype'),
format url ('fonts / WebFont-Bold.woff') ('woff'),
format url ('fonts / WebFont-Bold.ttf') ('truetype'),
format url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
poids de police: gras;
style de police: normal;

Où nous définissons la propriété font-weight en gras.

N'oubliez pas d'indiquer l'emplacement correct des fichiers de polices pour chaque style.

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

@ font-face 
famille de polices: 'MyWebFont';
src: url ('fonts / WebFont-Italic-Bold.eot');
src: format url ('fonts / WebFont-Italic-Bold.eot? #iefix') ('embedded-opentype'),
format url ('fonts / WebFont-Italic-Bold.woff') ('woff'),
format url ('fonts / WebFont-Italic-Bold.ttf') ('truetype'),
format url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
poids de police: gras;
style de police: italique;

Eh bien, c'est tout 🙂 Maintenant, 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.

Emballage de polices personnalisées pour WordPress

Quelle est la première chose que les utilisateurs remarquent lorsqu'ils visitent votre site? À droite, sa conception! La plupart de la conception repose sur l'utilisation appropriée de belles polices. Vous devez donc prendre soin de la conception des polices de votre site. Ajoutez du code ou utilisez l'un des plugins mentionnés ci-dessus pour incorporer un nouveau style de police. La façon dont vous le choisissez dépend de vous.

Assurez-vous que vous n'utilisez pas plus de deux polices sur le même site. Étant donné que plus vous ajoutez de polices personnalisées au site, plus la vitesse du site ralentit.

C’est tout, n'hésitez pas à commenter.

Nous serons également heureux de savoir quelle option vous choisissez pour ajouter une police personnalisée à votre site Web et où vous trouvez votre police.