Comment ajouter une police hors ligne à votre site WordPress

Publié: 2022-10-31

Si vous cherchez à ajouter une personnalité supplémentaire à votre site WordPress, vous voudrez peut-être envisager de charger une police hors ligne. Bien qu'il existe de nombreuses façons de procéder, nous allons vous montrer l'une des méthodes les plus simples à l'aide du générateur de polices Web Font Squirrel. Une fois que vous avez téléchargé vos fichiers de polices , vous pouvez les télécharger sur votre site WordPress et les utiliser comme n'importe quelle autre police. Commençons!

Cet article était sur mon bureau depuis un certain temps et je voulais le partager avec vous. Les polices Google sont entièrement chargées localement. Jusqu'à présent, j'ai utilisé les polices Google Oswald et Lato de Crunchify.com. Ouvrez simplement l'URL dans l'image ci-dessus qui apparaît dans le nouvel onglet et vous remarquerez qu'elle a généré 14 nouvelles polices . Ce tutoriel vous aidera également si vous avez l'une des questions suivantes. Une fois que vous avez extrait le fichier Lato.zip, vous pourrez voir les dix polices de Lato avec l'extension.ttf. Sur la plupart des sites Web, vous n'avez besoin que de polices régulières, en gras et en italique.

À l'étape 2, vous devez maintenant convertir vos polices aux formats woff2, eot, svg, ttf et wof. Un fichier peut être téléchargé sur le site https://Font-Converter.net/en qui convertira la police dans ces formats. Rien d'autre ne doit être dit. Vous pouvez maintenant charger des polices à partir de votre système de fichiers local.

Comment ajouter des polices personnalisées au thème WordPress ?

Image par: pinimg.com

Il existe plusieurs façons d'ajouter des polices personnalisées à votre thème WordPress. Une façon consiste à utiliser la bibliothèque Google Fonts. Vous pouvez trouver une liste complète de toutes les polices disponibles sur le site Web de Google Fonts. Une fois que vous avez trouvé une police que vous aimez, vous pouvez ajouter le code à la feuille de style de votre thème (style.css). Par exemple, si vous vouliez utiliser la police « Open Sans », vous ajouteriez le code suivant à votre feuille de style : body { font-family : 'Open Sans', sans-serif ; } Une autre façon d'ajouter des polices personnalisées à votre thème WordPress est d'utiliser un plugin comme Easy Google Fonts . Ce plugin facilite l'ajout de polices personnalisées à votre thème sans avoir à modifier de code.

Le plugin Easy Google Fonts peut être utilisé pour ajouter des polices personnalisées à votre site WordPress. En utilisant cette méthode, vous pourrez attirer l'attention sur votre site Web en utilisant une large gamme de polices. Il a été démontré que la typographie présente un certain nombre d'avantages dans la recherche. Un site Web simple permet aux clients de communiquer plus facilement avec vous. En utilisant les propriétés CSS, vous pouvez modifier le style et le positionnement de votre police préférée en plus de modifier son style et son positionnement. En plus de vos propres contrôles de police, vous pouvez utiliser la page des paramètres du plugin WordPress pour les ajouter. Si vous ne souhaitez pas utiliser de plugin, vous pouvez utiliser celui-ci à la place des polices Adobe.

Installez le plugin Custom Adobe Fonts pour simplifier l'intégration de ces polices dans votre site WordPress. Installez le plug-in, puis accédez à la vaste bibliothèque de polices d'Adobe pour trouver une police qui fonctionnera pour vous (vous devez vous inscrire pour l'utiliser). Après avoir choisi une police, cliquez dessus, puis recherchez dans le coin supérieur droit de la page "Ajouter au projet Web". À l'aide de Font Pair, vous pouvez voir à quoi ressemblent vos combinaisons de polices et vous pouvez mélanger et assortir les polices en fonction de ce que vous voyez. Il existe plusieurs excellents sites Web qui vendent des polices personnalisées créées par le concepteur lui-même. Une grande bibliothèque de polices est incluse avec la police Squirrel, et elle est également simple à mettre en œuvre. Vous pouvez utiliser le kit de polices Web de @Font-Face.

Votre site WordPress devrait maintenant être prêt à être utilisé. Le kit comprend le fichier de polices ainsi qu'une feuille de style contenant le code dont vous aurez besoin pour créer votre propre feuille de style CSS. Par exemple, nous aurions besoin d'utiliser le CSS suivant pour la police OpenSans-ExtraBold- web . La meilleure solution consiste à enregistrer tous les fichiers de polices dans un emplacement de votre choix.

Comment charger les polices Google dans WordPress

Accédez au panneau d'administration WordPress et sélectionnez Ajouter nouveau. Téléchargez et installez Easy Google Fonts à partir du Google Play Store. Après avoir installé le plugin, vous devez cliquer sur le bouton Activer pour commencer à l'utiliser.

Sur votre site Web ou vos produits numériques, vous pouvez utiliser Google Fonts pour tester plus de 1 000 familles de polices différentes. Si vous souhaitez ajouter manuellement des polices Google à votre site WordPress, plusieurs options s'offrent à vous. Ils sont gratuits et open source, ils peuvent donc être utilisés par n'importe quel développeur. Le moyen le plus pratique d'intégrer les polices Google consiste à inclure un extrait avec l'URL de la famille de polices spécifique dans votre fichier functions.php. Si vous trouvez le processus manuel difficile, vous pouvez utiliser un plugin. Vous pouvez d'abord installer le plugin en visitant le référentiel de plugins WordPress. Il doit maintenant être installé et activé.

La plupart des thèmes WordPress incluent l'intégration des polices Google dans leurs paramètres par défaut. Les plugins qui composent la plateforme OMGF vous permettent de parcourir plus de 600 polices sur votre site Web. Dans le menu déroulant « Famille de polices », vous pouvez sélectionner parmi plus de 100 types différents pour différentes sections de votre site. Il existe plusieurs options pour ajouter des contrôles de police personnalisés , comme indiqué dans l'aperçu du personnalisateur.

Dois-je charger Google Fonts localement WordPress ?

Si votre site WordPress contient des erreurs Google Font, vous devez charger les polices Google localement pour les résoudre. Il existe des ressources et des scripts externes que vous ne pouvez pas contrôler, ce qui rend impossible de les compresser, de les réduire ou de les optimiser. Votre vitesse WordPress sera gravement entravée si vous ne prenez pas ces précautions.

Wp-contenu/thèmes/votre-thème/polices

Le dossier wp-content/themes/your-theme/fonts est l'endroit où vous pouvez stocker toutes les polices personnalisées que vous souhaitez utiliser avec votre thème. Les polices peuvent être ajoutées à ce dossier via FTP ou en utilisant un plugin de gestionnaire de fichiers. Une fois les polices ajoutées à ce dossier, elles peuvent être utilisées dans le CSS de votre thème en référençant le nom de la police.

Les styles globaux peuvent être utilisés pour changer la police de votre site Web s'il utilise l'un des thèmes suivants. Dans ce cas, les polices de base et d'en-tête sont dans la même paire de polices. Pour enregistrer les nouvelles paires de polices, cliquez sur le bouton Publier dans le menu Styles globaux ou cliquez sur Réinitialiser pour annuler les modifications. Après avoir choisi les polices personnalisées appropriées, vous pouvez les modifier aussi souvent que vous le souhaitez. Si vous souhaitez modifier la taille de votre titre ou des polices de base, vous pouvez le faire en sélectionnant l'option de taille ci-dessous et à droite de chaque police, puis en sélectionnant une taille dans le menu déroulant. Avec CSS personnalisé, vous pouvez modifier la taille de police globale par défaut. Assurez-vous de désactiver ou de supprimer un plugin si vous décidez de ne plus l'utiliser après l'avoir testé. Il n'est pas possible de lier un compte Typekit.com à un blog ou un site Web WordPress.com. Si vous souhaitez tester la compatibilité d'une police spécifique avec une langue donnée, utilisez le Customizer.

Ajouter des polices à WordPress sans plugin

Il existe plusieurs façons d'ajouter des polices à WordPress sans plugin. Une façon consiste à utiliser la bibliothèque Google Fonts. Rendez-vous simplement sur le site Web de Google Fonts, sélectionnez la police que vous souhaitez utiliser, puis copiez le code fourni. Ensuite, ouvrez votre tableau de bord WordPress et accédez à Apparence > Personnaliser. Ensuite, cliquez sur l'onglet "CSS supplémentaire" et collez le code que vous avez copié à partir de Google Fonts. Enregistrez vos modifications et la nouvelle police sera appliquée à votre site Web.

Les thèmes n'ont pas besoin d'inclure les polices Web dans leurs paramètres par défaut. Lors de la navigation sur une page Web, vous pourrez la télécharger à l'aide de votre navigateur. Pour copier et coller le code des polices dans votre fichier de thème, choisissez simplement la police souhaitée. Vous pouvez utiliser plusieurs polices en même temps et vous verrez combien de temps les polices se chargent. Ajoutez plus de CSS à votre blog WordPress en accédant au tableau de bord du blog WordPress. Copiez l'intégralité du code de la zone grise 1 dans la police Web du corps du texte. La nouvelle famille de polices Web se trouve dans la deuxième zone grise de la bibliothèque de polices Google . De plus, le code suivant peut être utilisé pour ajuster la taille et l'épaisseur de la police.