Ajout de polices personnalisées à WordPress


Comment ajouter des polices personnalisées à WordPress


Choisir la bonne police pour votre site WordPress est un élément central de la conception Web et de l’image de marque du site Web.

Comme les couleurs, les images et autres éléments, la typographie joue un grand rôle dans la façon dont votre site est perçu par les visiteurs.

Heureusement, les polices WordPress sont l’une des nombreuses choses que vous pouvez personnaliser librement. Vous pouvez utiliser à peu près n’importe quelle police personnalisée gratuite sur votre site WordPress que vous souhaitez.

Nous couvrirons tout ce que vous devez savoir sur les polices WordPress:

  • A) Comment ajouter des polices personnalisées à WordPress (manuellement)
  • B) Comment ajouter des polices personnalisées à WordPress (via un plugin)
  • Pourquoi utiliser des polices personnalisées sur WordPress
  • Où trouver des polices personnalisées
  • Conclusion

A) Comment ajouter manuellement des polices personnalisées à WordPress

Lorsqu’il s’agit d’ajouter manuellement des polices personnalisées à WordPress, vous disposez de trois options principales: HTML, JavaScript et CSS. Il y a des avantages et des inconvénients à chaque méthode et celle qui est la bonne pour vous dépend de votre configuration. Ne vous inquiétez pas, nous allons les parcourir en détail.

1. Utilisation de CSS et @importation

Commençons par la méthode la moins recommandée. Si vous prévoyez d’installer des polices de caractères personnalisées à partir de Google Fonts, vous avez peut-être remarqué qu’il comporte un onglet intitulé @importation. Le service vous donne un morceau de code CSS.

onglet d'importation dans les polices google

Vous pouvez le prendre tel quel et l’insérer dans votre en-tête (plus d’informations ci-dessous) ou le copier sans le >crochets au début de votre thème (ou mieux encore, thème enfant) style.css fichier.

/ *
Nom du thème: Vingt-dix-sept enfants
URI du thème: https://wordpress.org/themes/twentyseventeen/
Modèle: vingt-sept ans
Auteur: l'équipe WordPress
URI de l'auteur: https://wordpress.org/
Version: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS supplémentaire va ici * /

Cela chargera la police dans votre site à partir de la feuille de style. Cela semble être une solution simple, non? Pourquoi est-il alors le moins recommandé?

La raison en est les problèmes de performances. En utilisant @importation n'est plus la solution recommandée car elle empêche les navigateurs de télécharger plusieurs feuilles de style à la fois. La conséquence: des temps de chargement des pages plus lents. Restez à l'écart si vous le pouvez.

2. Utilisation d'un fichier de modèle WordPress

Une deuxième méthode pour obtenir les polices sur votre site consiste à prendre le code fourni par les bibliothèques de polices et à les copier dans votre header.php fichier modèle. La plupart des thèmes WordPress standard l'ont.

Assurez-vous de le placer quelque part entre le et supports. De cette façon, votre police se chargera chaque fois qu'une page est chargée.

saisir le code des polices google dans l'en-tête wordpress

Si vous utilisez un thème enfant, assurez-vous de copier le thème parent header.php fichier dans le répertoire du thème enfant et y apporter les modifications.

Certains thèmes sont livrés avec des paramètres vous permettant d'ajouter du code personnalisé à votre en-tête et pied de page via le backend. C'est aussi une option viable.

3. Utilisation @ font-face

Jusqu'à présent, nous n'avons parlé que de l'utilisation de polices personnalisées dans WordPress qui sont hébergées ailleurs, à savoir les serveurs de Google et d'Adobe. Cependant, il est également possible d'héberger des polices sur votre propre site et de les proposer aux navigateurs des visiteurs à partir de là.

Pour ce faire, vous devez d'abord télécharger la police en question. Rappelez-vous le bouton de téléchargement sur Google Fonts? Celui-ci deviendra pratique maintenant. D'autres fournisseurs vous permettent également de télécharger des polices.

Lorsque vous le faites, assurez-vous de l'obtenir dans un format de police Web. Cela signifie TTF, OTF ou WOFF. Vous trouverez plus d'informations à ce sujet ici. Si vous n’avez pas le bon format de police Web, vous pouvez également utiliser ce service convertir votre police en police prise en charge.

Une fois que vos fichiers de polices sont prêts, vous devez les télécharger sur votre site WordPress via FTP. Un bon endroit pour les stocker est dans un sous-répertoire de votre thème enfant nommé polices (créatif, nous le savons).

Après cela, vous devez charger la police dans votre feuille de style via @ font-face. Voici à quoi ça ressemble:

@ font-face {
famille de polices: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
poids de police: normal;
}

N'oubliez pas de remplacer le nom de la police et l'adresse de son emplacement sur votre propre site. Après cela, votre nouvelle police personnalisée sera utilisable.

Cependant, ce n'est pas non plus la meilleure solution, en particulier en termes de performances. Les serveurs de Google sont probablement plus rapides que les vôtres et donc le chargement de polices personnalisées à partir de là est probablement la meilleure solution.

4. Mise en file d'attente des polices - La «manière WordPress»

Si vous voulez vraiment ajouter des polices personnalisées à WordPress de la bonne façon, vous utiliserez votre functions.php fichier (à l'intérieur du répertoire de votre thème actuellement actif) et la fonction  wp_enqueue_script ou wp_enqueue_style.

Avec leur aide, nous pouvons prendre les extraits de code fournis par les sites de polices. Cependant, au lieu de les copier dans un fichier, nous les ajouterons à l'en-tête via une fonction.

Quelle est la différence entre wp_enqueue_script et wp_enqueue_style? Comme leur nom l'indique, l'un sert à ajouter des scripts, l'autre aux feuilles de style. Laquelle est la bonne à utiliser dépend de la façon dont vos polices personnalisées sont fournies à partir de leur source.

Par exemple, Google Fonts vous propose des polices sous forme de feuilles de style. Dans ce cas, vous les ajouteriez à votre site WordPress de cette façon:

fonction add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Contrairement à cela, les polices d'Adobe Edge Web Fonts sont fournies en JavaScript. Par conséquent, pour les mettre en file d'attente sur votre site, le code ressemblerait à ceci:

fonction add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Ce n'était pas si difficile, non? De plus, vous obtenez des points supplémentaires pour le faire à la manière de WordPress.

5. Appelez les polices personnalisées dans votre feuille de style

Maintenant que les polices ont été ajoutées à votre site, vous pouvez officiellement les utiliser. Pour ce faire, il ne vous reste plus qu'à ajouter une déclaration pour la nouvelle police dans votre feuille de style. Par exemple, pour changer la police de vos balises de titre, vous utiliseriez quelque chose comme ceci:

h1,
H2,
h3,
h4,
h5,
h6 {
famille de polices: 'Roboto';
}

Remarque: Faites attention à la façon dont le service que vous utilisez spécifie la déclaration CSS pour vos polices. Sur notre site de test, nous n'avons apparemment pas pu faire fonctionner les polices Web Adobe Edge car elles appellent Open Sans en CSS avec open-sans par opposition à «Open Sans» dans Google Fonts.

C'est ça. Vous savez maintenant comment ajouter manuellement des polices personnalisées à WordPress. Félicitez-vous, ce sont des connaissances de niveau supérieur! Évidemment, les mêmes actions sont possibles via des plugins. C’est ce dont nous parlerons ensuite.

B) Comment ajouter des polices personnalisées à WordPress via un plugin

La sphère WordPress ne serait pas ce qu'elle était s'il n'y avait pas plusieurs solutions de plug-in pour ajouter des polices personnalisées à la plate-forme. Nous verrons comment utiliser Polices Google faciles, qui est l'un des plugins les plus populaires dans ce domaine.

1. Installez le plugin

La première étape consiste à installer le plugin. Pour ce faire, rendez-vous sur Plugins> Installer nouveau. Ensuite, recherchez le nom du plugin. Dans les résultats de recherche, cliquez sur Installer maintenant et activez le plugin une fois sur votre site.

2. Ajouter / modifier des polices sur votre site

Lorsque le plugin est actif, vous trouvez un nouvel élément de menu appelé Typographie en dessous de Apparence> Personnaliser.

menu de typographie dans le personnalisateur wordpress

Lorsque vous cliquez dessus et choisissez Typographie par défaut, vous trouvez une liste de contrôles pour changer la police de vos paragraphes et en-têtes.

paramètres faciles des polices google dans le personnalisateur wordpress

Les utiliser est vraiment simple. Cliquez simplement sur le menu déroulant où il est dit Modifier la police pour la partie de votre site pour laquelle vous souhaitez la modifier. Cela vous donne accès à ce menu:

polices google simples changer la police

Ici, la partie la plus importante est celle sous le Famille de polices. Ici, vous pouvez choisir un nouveau type de police dans toute la bibliothèque de polices Google (utilisez Script / sous-ensemble pour limiter les choix de police à ceux avec des caractères spéciaux).

Les polices sont classées par police standard, empattement, sans empattement, affichage, écriture manuscrite et monospace. Cependant, vous pouvez également simplement les rechercher par nom.

Lorsque vous cliquez sur une police, vous pouvez prévisualiser les modifications en temps réel sur la droite.

police personnalisée modifiée dans les polices google faciles

3. Configurer la police

Une fois que vous avez choisi une police, il existe de nombreuses options pour personnaliser davantage votre typographie.

Tout d'abord, vous pouvez modifier le poids / le style de la police dans le menu du même nom. Cela contrôle l'épaisseur des lettres.

En outre, en vertu de Décoration de texte, vous pouvez ajouter un soulignement, un barré et un surlignage. Transformation de texte vous permet également de le mettre en majuscules, en minuscules ou en majuscule à chaque première lettre. Sous le Apparence onglet en haut, vous pouvez également contrôler la couleur de la police, la couleur d'arrière-plan, la taille de la police, la hauteur de la ligne et l'espacement des lettres.

paramètres d'apparence dans les polices google faciles

finalement, Positionnement vous permet de modifier d'autres paramètres tels que la marge, le remplissage, la bordure, le rayon de la bordure et l'affichage.

paramètres de positionnement dans les polices google faciles

En bref, vous devriez pouvoir personnaliser complètement les polices de votre site à votre convenance. Facile, non? N'oubliez pas de frapper Enregistrer et publier au sommet lorsque vous êtes satisfait de vos changements.

Ça ne marche pas, que dois-je faire?

Parfois, vous ne pouvez pas modifier certaines polices de votre site. Cela se produit généralement lorsque le thème que vous utilisez est livré avec des classes CSS non standard et des sélecteurs pour les styliser.

Par exemple, dans le thème Twenty Sixteen, les titres des articles de blog ne sont pas seulement définis comme H1 mais ont également une classe CSS appelée .titre-entrée. Pour cette raison, le plugin n'est pas en mesure de les modifier.

Pour remédier à ce problème, vous devez créer un soi-disant contrôle des polices en dessous de Paramètres> Polices Google.

ajouter le contrôle des polices dans les polices google faciles

Vous pouvez associer des sélecteurs CSS à un nouveau contrôle et forcer le remplacement si nécessaire. Après cela, le nouveau contrôle de police est disponible comme option supplémentaire dans le personnalisateur WordPress sous Typographie du thème. Peasy facile.

Autres polices personnalisées Plugins WordPress

Il existe également d'autres plugins WordPress disponibles pour ajouter des polices personnalisées:

  • Utiliser n'importe quelle police - Il vous aide à utiliser les polices téléchargées sans CSS. Il héberge les polices sur votre propre serveur et propose également des outils de conversion pour les formats de police.
  • Polices Typekit pour WordPress - Utilisez des polices d'Adobe Typekit service (auquel vous devez vous inscrire). Il vous permet de saisir des codes d'intégration et des CSS personnalisés directement dans le plugin.
  • TK Google Fonts - Une solution alternative pour intégrer des polices Google qui déplace à peu près l'expérience des polices Google vers le backend WordPress. Essayez des polices avec un aperçu et un texte personnalisé, puis modifiez-les dans le personnalisateur WordPress.

Pourquoi utiliser des polices personnalisées sur votre site Web WordPress?

La typographie est une science en soi et nous ne pourrons pas vous donner ici un cours complet sur l'utilisation des polices dans la conception de sites Web. Après tout, il ne s'agit pas seulement de la police, mais aussi de sa taille, de son inclinaison, de son épaisseur et de bien d'autres choses. Cependant, nous pouvez expliquer pourquoi l'utilisation de polices personnalisées sur votre site WordPress est une bonne idée.

1. La typographie fait partie de la première impression

Tout d'abord, la police que vous utilisez influence beaucoup la perception de votre site. Votre site est-il amusant et ludique? Êtes-vous un professionnel? Les visiteurs décident d'un seul coup d'œil et votre typographie joue un grand rôle dans leur perception.

2. Les polices ont beaucoup plus d'influence que vous ne le pensez

Cela peut affecter votre capacité à apprendre, à mémoriser des textes et même à modifier votre humeur.

Par exemple, dans un recherche, il a été noté que si vous souhaitez augmenter le temps passé à lire du texte, vous devez utiliser une police serif. Cependant, si vous souhaitez en savoir plus dans un court laps de temps, vous devez passer à une police sans serif.

Une autre étude a montré aux gens les mêmes instructions d'exercice dans différentes polices. Ils ont ensuite demandé aux participants d'estimer le temps qu'il leur faudrait pour suivre lesdites instructions. Fascinant, ceux avec la police la plus complexe ont deviné que cela leur prendrait plus de temps que le groupe avec la police la plus simple. En conséquence, ils étaient moins susceptibles de suivre la routine d'exercice.

Où trouver des polices personnalisées

1. Utilisez les polices Google pour trouver une typographie personnalisée

Le premier service que nous examinerons est Google Fonts. Comme son nom l'indique, il s'agit d'un service de Google qui propose plus de 800 polices différentes. Libre à utiliser. Pour tout le monde.

Voici comment l'utiliser:

2. Trouvez la bonne police

Lorsque vous accédez pour la première fois à la page Google Fonts (tapez simplement cela dans la recherche Google), voici ce que vous verrez:

comment ajouter des polices personnalisées dans la page d'accueil de wordpress google fonts

L'interface utilisateur est conçue pour vous aider à trouver la police adaptée à votre objectif. Si vous avez déjà une police en tête, vous pouvez simplement taper son nom dans le champ de recherche sur le côté droit.

Sinon, vous pouvez filtrer les polices de différentes manières, par exemple par catégorie:

  • Serif - Signification des polices avec des lignes ondulées à la fin, comme Times New Roman.
  • Sans-Serif - Polices simples sans gribouillis, comme Helvetica. Les polices utilisées sur ce site Web en sont un exemple.
  • Afficher - Polices de caractères pouvant être utilisées dans des tailles plus grandes telles que les titres.
  • Écriture - Voulez-vous que votre typographie ait l'air d'avoir été écrite à la main? Ensuite, c'est votre réglage.
  • Monospace - Typographie où tous les personnages occupent le même espace, comme ça.

Les autres filtres incluent:

  • Tri - Trier les polices après les tendances, populaires, ajoutées à la date ou par ordre alphabétique.
  • Les langues -Limitez votre choix de police aux langues non écrites en alphabet latin comme l'arabe, le thaï ou le vietnamien.
  • Un certain nombre de styles -Choisissez le nombre de styles disponibles dont vous avez besoin, ce qui signifie si une police est disponible en différentes épaisseurs, en italique, en gras, etc..
  • Épaisseur - Choisissez l'épaisseur souhaitée de votre police.
  • Incliner - Identique à l'épaisseur mais pour l'inclinaison. Elle va de droite à presque horizontale.
  • Largeur - Filtrer les polices par la largeur de leurs lettres et l'espacement.

Lorsque vous appliquez des filtres, vos résultats de recherche s'ajustent en temps réel. Sur la gauche, vous verrez les polices disponibles dans votre catégorie et des exemples de phrases.

Lorsque vous survolez une police, vous pouvez utiliser les menus déroulants en haut pour que Google Fonts affiche un exemple de paragraphe, l'alphabet entier ou des chiffres. Vous pouvez aussi simplement cliquer sur le champ de la phrase et écrire ce que vous voulez.

modifier un exemple de texte dans les polices google

En plus de cela, il existe des options pour changer le style et la taille de la police. Lorsque vous apportez des modifications, vous avez également la possibilité de les appliquer à tous vos résultats de recherche. Enfin, regardez la page des détails de la police en cliquant sur Voir spécimen.

page de détails des polices dans les polices google

3. Ajoutez des polices à votre collection

Si vous aimez une police particulière, vous pouvez utiliser le signe plus rouge dans le coin supérieur droit pour l'ajouter à votre collection. Cela ouvrira un menu en bas où vous verrez toutes les polices choisies.

polices sélectionnées dans les polices google

Notez que vous pouvez ajouter plusieurs familles de polices. Cela a du sens, par exemple, lorsque vous en choisissez un pour votre corps et un autre pour les titres.

4. Personnaliser les paramètres de police

Une fois que vous êtes satisfait de votre collection, cliquez sur le menu du bas. Cela ouvrira cet écran:

paramètres de police dans les polices google

Comme vous pouvez le voir, vous pouvez trouver des morceaux de code pour incorporer et utiliser des polices sur votre site. Cela deviendra important plus tard. Pour l'instant, cliquez sur l'onglet qui dit Personnaliser. Cela vous amène à ce menu:

personnaliser les polices dans les polices google

Ici, vous pouvez sélectionner les styles des polices en question. Ceci est important si vous souhaitez utiliser des polices de différentes tailles, ce qui est souvent le cas.

Cependant, soyez prudent: plus votre site doit charger de styles, plus il ralentira (Google Fonts vous donne même une indication de la vitesse de chargement de votre collection actuelle en haut à droite). Alors, pensez à ce dont vous avez vraiment besoin et ne choisissez que cela. Soit dit en passant, il existe d'autres façons d'accélérer WordPress.

Si vous avez besoin d'une autre langue que l'alphabet latin standard, assurez-vous de la sélectionner également en bas.

sélectionner les langues de police dans les polices google

En plus de cela, tout ce que vous devez savoir sont les deux icônes fléchées en haut.

bouton de téléchargement et de partage dans les polices google

Celui de gauche vous permet de prévisualiser et de partager votre collection de polices. Lorsque vous choisissez de le faire, il ouvre une page étendue où vous pouvez insérer un exemple de texte et le voir dans toutes les polices à la fois. Cette page est également bonne à partager avec les gens.

Plus important est le bouton de téléchargement à côté. En cliquant dessus, vous pouvez télécharger les fichiers de polices pour les utiliser sur votre ordinateur de bureau (par exemple, dans Photoshop). Utilisation Skyfonts pour les tenir à jour.

Plus tard, nous vous montrerons également un moyen de télécharger ces fichiers sur votre serveur et d'héberger les polices directement sur votre site. Gardez cela à l'esprit pour l'avenir. Pour l'instant, nous allons vous montrer une deuxième bibliothèque de polices similaire.

Source supplémentaire pour les polices personnalisées

  • 15+ polices Web sécurisées que nous recommandons

Avec ce qui précède, vous devriez être en mesure de trouver quelque chose pour vous-même. Un dernier conseil - si vous ne savez pas comment combiner correctement les polices, utilisez Paire de polices où les designers ont fait le travail pour vous.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map