Téléchargement de polices personnalisées à l'aide du plug-in Hash Custom Font Uploader

Vous en avez assez d'utiliser les mêmes vieilles polices sur votre site Web et souhaitez lui donner un aspect différent ? Si vous n'êtes pas un expert en codage, ne vous inquiétez pas ! Nous avons un guide simple qui vous montrera un moyen simple d’ajouter vos polices préférées à vos thèmes WordPress. Cette documentation vous guidera tout au long du processus de téléchargement de polices personnalisées, une étape à la fois, ce qui simplifiera l'attribution d'un style unique à votre site Web.

INSTALLATION DU PLUGIN

Pour commencer à personnaliser et à télécharger votre police, vous devrez installer un plug-in appelé Hash Custom Font Uploader .

*Remarque : ce plugin est uniquement compatible avec les thèmes de HashThemes*

Installation du téléchargeur de polices personnalisées de hachage

Pour installer le téléchargeur de polices Hash, suivez les instructions :

• Accédez à Plugins > Ajouter de nouveaux plugins > Télécharger des plugins .
• Cliquez sur Upload Plugin et choisissez le fichier .zip sur votre PC.
• Après avoir téléchargé le fichier .zip, cliquez sur Installer maintenant .
• Activez ensuite le plugin.
• Vous pouvez voir le plugin apparaître comme Hash Custom Font Uploader.

Une fois que vous avez installé le plugin, vous pouvez ensuite utiliser vos polices personnalisées pour lancer le processus de téléchargement des polices.

Laissez-nous vous guider tout au long du processus, étape par étape.

SÉLECTION DE POLICE

Les thèmes optimisés par HashThemes proposent une large sélection de polices Google parmi lesquelles vous pouvez choisir. Il existe plus de 800 polices Google.

Cependant, si vous recherchez quelque chose de distinctif, vous pouvez toujours explorer de nombreux sites Web de polices qui offrent une plus grande variété de choix conçus par plusieurs concepteurs de polices et sont disponibles gratuitement ou payants sur différents sites Web.

Font Squirrel est un excellent exemple d’un tel site Web. Cette plate-forme vous offre non seulement la liberté de télécharger des polices gratuitement, mais rationalise également le processus de conversion de vos fichiers dans les formats nécessaires au téléchargement des polices.

De plus, il convient de mentionner qu'il existe de nombreuses polices de haute qualité disponibles à l'achat, ne nécessitant que des frais minimes, et qu'elles sont prêtes à être utilisées immédiatement.

Dans ce didacticiel, nous montrerons comment simplifier le processus de téléchargement de polices à l'aide de Font Squirrel.

Nous avons besoin de 2 formats de fichiers de polices (WOFF et WOFF2) à utiliser dans Hash Custom Font Uploader. Si vous souhaitez en savoir plus sur les variations de la police et pourquoi les fichiers sont convertis au format WOFF et WOFF2, lisez la suite. Si vous souhaitez commencer immédiatement à télécharger un didacticiel sur les polices personnalisées, cliquez ici.

COMPRENDRE LES DIFFÉRENTS FORMATS DE FICHIERS

Avant de passer au didacticiel, familiarisons-nous avec certains formats de fichiers typiques dans lesquels les polices peuvent entrer.

Police TrueType (.ttf) : un format de police .ttf est un format de police largement utilisé pour la typographie de bureau et Web. Ce type de fichier est compatible avec les systèmes Windows et macOS.

Police OpenType (.otf) : un format Open Type est une extension du format True Type. Ce format permet des fonctionnalités typographiques supplémentaires et est compatible avec Windows et macOS.

Web Open Font Format (.woff) : ce type de format est spécifiquement conçu pour une utilisation sur le Web. Il offre une bonne compression et une bonne compatibilité avec les navigateurs.

Web Open Font Format 2 (.woff2) : ce format de fichier est une version améliorée du format Web Open Font, offrant une compression et des performances supérieures pour les polices Web.

Police PostScript Type 1 (.pfb) : le format de police de type PostScript est une ancienne version du format de police qui est principalement utilisée dans l'industrie de l'impression PostScript.

Police SVG (.svg) : basée sur le XML, les polices SVG sont souvent utilisées pour les icônes Web et les conceptions spéciales.

Bitmap Font (.fon) : polices représentées sous forme de grille de pixels, adaptées aux affichages basse résolution.

Voici quelques-uns des formats de polices utilisés à diverses fins. La raison pour laquelle vous vous familiarisez avec ces formats est que certains fichiers doivent être convertis pour un avantage supplémentaire.

Les formats de fichiers les plus couramment utilisés sont TTF (True Type Font) et OTF (Open Type Font) pour la typographie de bureau et Web.

Cependant, à partir de 2021, les formats de polices les plus couramment utilisés pour le Web étaient Web Open Font Format (WOFF) et WOFF2 (Web Open Font Format 2).

*Remarque : Il est important de savoir que la popularité des polices peut évoluer avec le temps et que les nouvelles technologies peuvent remplacer les anciennes.*

Pourquoi est-il nécessaire de modifier les fichiers aux formats .woff et .woff2 ?

Bien que les fichiers TTF et OTF puissent être directement téléchargés sur le Web, leur conversion au format de fichier .woff et .woff2 présente plusieurs avantages :

1. Compression :

La principale raison de convertir les fichiers TTF et OTF aux formats WOFF et WOFF2 est leur taille compressée. Lorsque la taille du fichier est plus petite, les temps de chargement des pages Web sont plus rapides. Ceci est également crucial pour améliorer l’expérience utilisateur et les classements SEO.

2. Optimisation Web :

Les formats WOFF et WOFF2 sont bien adaptés au Web et largement acceptés, notamment la fonctionnalité de sous-paramètres de polices permettant aux utilisateurs d'inclure uniquement les caractères et les glyphes nécessaires à une page Web particulière, réduisant ainsi davantage la taille du fichier.

3. Compatibilité du navigateur :

Les navigateurs Web modernes prennent largement en charge les formats WOFF et WOFF2, garantissant un rendu fiable des polices sur différentes plates-formes et appareils. Les fichiers TTF et OTF peuvent avoir différents niveaux de compatibilité et de prise en charge.

4. Licence :

De nombreuses licences de polices autorisent généralement l'utilisation des formats WOFF et WOFF2 sur le Web, alors qu'elles peuvent imposer davantage de restrictions sur les fichiers TTF et OTF. En convertissant les polices au format WOFF/WOFF2, vous pouvez vous assurer que vous respectez les exigences de licence de police.

5. Performances :

Les formats de police WOFF et WOFF2 sont généralement optimisés. Par conséquent, ils fonctionnent mieux dans les environnements Web, ce qui entraîne un rendu du texte plus fluide et plus rapide.

Ce sont les éléments de base nécessaires pour convertir les fichiers TTF et OTF en fichiers WOFF/WOFF2. Ensuite, nous vous guiderons tout au long du processus de téléchargement de polices.

SÉLECTION DE POLICES SUR LE SITE WEB « FONT SQUIRRE L »

Commençons maintenant par le processus de sélection des polices et explorons plus en détail.

• Entrez « Sinkin Sans » dans la barre de recherche et vous verrez un aperçu de la police ainsi que ses différentes variantes.
• Ensuite, téléchargez le fichier OTF pour la police Sinkin Sans.

Quant à ce tutoriel, nous avons choisi la police « Sinkin Sans » . Vous pouvez choisir et utiliser n’importe quelle police de votre choix. De plus, comme nous l’avons mentionné précédemment, la police peut être dans différents formats. Ici, le fichier de police Sinkin Sans est au format OTF.

• Extrayez le fichier .zip dans votre dossier désigné.

GÉNÉRATEUR DE POLICES WEB

Les polices à utiliser dans le téléchargeur de polices personnalisées Hash doivent être aux formats de fichier WOFF et WOFF2. Ainsi, si la police téléchargée est aux formats de fichier WOFF et WOFF2, vous pouvez ignorer l'étape ci-dessous et passer directement au téléchargeur de polices personnalisées Hash. Mais si la police téléchargée n'est pas aux formats WOFF et WOFF2, vous devrez alors utiliser Font Generator/Converter pour générer les fichiers de polices WOFF et WOFF2.

• Nous utiliserons l’application en ligne Webfont Generator du site Web Font Squirrel.
• Cliquez sur le générateur de polices Web comme indiqué par le numéro 3 dans la capture d'écran ci-dessous.

• Pour obtenir votre kit, cliquez sur le bouton Télécharger les polices et téléchargez les fichiers de polices téléchargés/extraits.

• Dans ce cas, nous choisissons « Sinkin Sans Regular ».
• Une fois votre sélection effectuée, cliquez simplement sur Ouvrir.
• Téléchargez le kit .

• Extrayez le zip téléchargé. Vous verrez que le générateur Webfont a créé les fichiers .WOFF et .WOFF2 nécessaires à notre plugin Hash Custom Font Uploader .

Téléchargement de polices personnalisées sur le plugin Hash Custom Font Uploader

La police Sinkin Sans est presque prête à être utilisée sur votre site Web, et vous n'êtes qu'à quelques pas. Veuillez suivre les instructions ci-dessous :

• Accédez au téléchargeur de polices personnalisées de hachage
• Ensuite, téléchargez les fichiers de polices .woff2 et .woff comme indiqué et assurez-vous de sélectionner l'épaisseur de police sur Normal 400 .
• À l'étape suivante, donnez un nom à votre police pour qu'elle soit plus facile à trouver lorsque vous en avez besoin. Dans ce cas, puisque la police est Sinkin Sans, nous l'avons nommée en conséquence.
• Enregistrez-le en cliquant sur « Enregistrer les paramètres » .
• Une fois enregistré, vous verrez comment la police Sinkin Sans apparaît en bas. Cela indique également que la police fonctionne et que vous pouvez l'utiliser maintenant.

Téléchargement de variantes pour les polices personnalisées

Une police peut avoir différents styles et apparences. Ici, nous allons apprendre comment ajouter différents styles de police de la même police.

La police que nous avons sélectionnée ci-dessus (Sinkin Sans) a différentes variantes comme fine, légère, régulière, moyenne, semi-grasse, grasse, noire et italique.

Ici, nous allons sélectionner le style Semi Bold de Sinkin Sans. Et nous allons utiliser un autre site Web de conversion de polices au lieu de « Font Squirrel »

Remarque : Il existe de nombreux autres convertisseurs sur Internet. Ici, nous utilisons CloudConvert.

• Pour commencer, rendez-vous sur le convertisseur OTF qui convertit nos fichiers en fichiers .woff2 et .woff.
• Ici vous pouvez voir que cela vous aide à convertir facilement des fichiers. Choisissez les fichiers vers lesquels vous allez convertir. Ici nous allons convertir le fichier Sinkin Sans semi bold .otf en .woff et .woff2
• Après avoir choisi le fichier à convertir, « Choisir un fichier » sur votre bureau.
• Convertissez les fichiers et cela prendra un certain temps.
• Une fois la conversion terminée, enregistrez les fichiers nécessaires sur votre PC.

• Accédez au téléchargeur de polices personnalisées de hachage
• Et pendant que vous ajoutez du poids à la même police, cliquez sur « Ajouter un poids de police » au lieu de cliquer sur « Ajouter une nouvelle police ».

• Ensuite, téléchargez les fichiers de polices .woff2 et .woff comme indiqué et assurez-vous de sélectionner l'épaisseur de police sur SemiBold 600 .
• Cliquez sur le bouton « Enregistrer les paramètres » pour l'enregistrer.
• Vous pouvez voir comment le texte apparaît. Le texte est plus gras que le texte ci-dessus.
• De même, vous pouvez ajouter plus de variantes de police en cliquant sur « Ajouter un poids de police » et une autre police en cliquant sur « Ajouter une nouvelle police ».

UTILISER LES POLICES DE VOTRE SITE WEB

Utilisons la police téléchargée sur le site Web.

• Accédez à Apparence> Personnaliser .
• Dans les paramètres de typographie , localisez l'option « Corps » pour une personnalisation plus poussée.
• Dans l'option « Famille de polices », recherchez « Sinkin Sans » et sélectionnez-le.
• Une fois la police sélectionnée, le « Font Weight/Style » affichera la variation que nous avions ajoutée précédemment (Normal 400 et Semi Bold).
• Sélectionnez la variante appropriée, puis voyez les modifications en direct dans la fenêtre de personnalisation de droite.
• Vous pouvez modifier la taille de la police, l’espacement des lettres et la hauteur des lignes à votre guise.
• Lorsque vous êtes satisfait, cliquez sur « Publier » pour appliquer les modifications et votre site Web arborera son nouveau look.

C'est tout ce que vous devez faire pour télécharger vos polices personnalisées. En cas de confusion, vous pouvez toujours nous contacter.