Pourquoi rendre votre blog ennuyeux en utilisant des polices standard ? Laissez votre blog parler de votre personnalité dynamique et des sujets que vous traitez 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. Non seulement ils décorent le site, mais ils 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ù trouver 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 où Times New Roman et Georgia étaient considérées comme les seules polices 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'informations et d'aides à 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 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 en lecture.

Tout dépend 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 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, alors 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 offre pas d'options pour changer la police, de nombreux sites Web et outils peuvent vous aider.

Alternatives aux polices Google

Où trouver des polices personnalisées

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'un usage commercial, 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 autres ressources pour trouver des polices pour une utilisation gratuite et commerciale :

  1. Monstre modèle — Sur le site Web de la place de 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. De plus, ils sont présentés à UN kit de développement web. La collection est immense et créative. 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. Mes polices — 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 sophistiquées à 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 distincte avec des polices gratuites. La collection est vibrante. Mais vous devrez étudier attentivement les informations de licence d'une police particulière avant de la télécharger.
  4. Cufonfonts — C'est aussi une vaste collection de polices différentes. Sélectionnez n'importe lequel et vous verrez une page avec 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. De plus, la prise en charge de Webfont est incluse.
  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 tant que caractères japonais.

Le choix des polices est très tentant car elles sont toutes belles. Mais vous ne devriez pas en choisir beaucoup. Utiliser 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, découvrons 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 avez besoin d'une police téléchargée, téléchargez-la sur le site et modifiez 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 WordPress total proposera des documents en ligne que vous pourrez 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 modifieront les polices de votre site.

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 aussi cet avantage. Plusieurs plugins WordPress vous permettent d'ajouter des polices personnalisées. Comment choisir un plugin adapté avec tant de choses ? 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 depuis 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 comme DaFont, Font Squirrel, etc., mais vous devez pouvoir les télécharger sur WordPress.

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

Téléchargeur de 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

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

WP Google Fonts vous permet d'utiliser le catalogue de polices Google. L'un des avantages étonnants de ce plugin est l'ajout de près de 1000 polices Google. Bien que vous puissiez mettre manuellement les polices Google en file d'attente, il est beaucoup plus facile d'utiliser un plugin 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.

WP Google Fonts

Vous verrez un panneau de contrôle des polices Google ici. Choisissez les polices et modifiez divers paramètres, tels que le style de police, les éléments auxquels elle s'applique, 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 bonne connexion de police pour chaque style, vous devez enregistrer un code distinct.
  • Sans connaître CSS, vous pouvez facilement vous perdre.

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

Noter: Avant de commencer, assurez-vous de créer un thème enfant pour votre site. De cette façon, vous pouvez apporter toutes les modifications à votre thème enfant, en laissant votre thème principal intact 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-thème-enfant/fonts

É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/fonts 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;
}

MonWebFont 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.

Depuis que nous avons connecté le style normal pour la première fois, nous avons défini les propriétés font-weight et font-style sur normal.

Étape 4. Lors de l'ajout italique, é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;
}

Là où tout est pareil, seulement nous avons attaché la propriété font-style à 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 les 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 ? Vous avez maintenant connecté quatre styles de police à votre site Web.

Mais il y a une remarque – cette connexion de police sera affichée de manière incorrecte dans Internet Explorer 8. La consolation est que très peu de personnes utilisent encore IE8.

Récapitulation des polices personnalisées pour WordPress

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

Assurez-vous de ne pas utiliser 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.