Comment ajouter des polices personnalisées aux sites Web Elementor en 2022

La typographie est l'une des principales préoccupations des concepteurs de sites Web pour placer les lettres et le texte de manière agréable. La bonne typographie est hautement responsable de rendre l'ensemble de la structure de conception lisible, claire et visuellement accrocheuse pour les lecteurs.

"Les polices du site Web représentent 90 % de la conception."

Élémentaire

Sur votre site WordPress, vous pouvez obtenir une collection par défaut de plus de 800 polices intégrées. Mais la difficulté survient si vous avez votre propre typographie personnalisée pour votre marque ou si vous souhaitez donner un look unique à votre site Web. Eh bien, la fonction de police personnalisée Elementor peut vous épargner le dos. Il vous permet d'ajouter différents styles, tailles et variations de police personnalisés à votre site WordPress.

Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment vous pouvez ajouter une police à votre site WordPress à l'aide de la fonction de police personnalisée Elementor.

Explication de la fonctionnalité de police personnalisée Elementor

Personnalisé (personnalisable) signifie une chose spécifique que vous pouvez créer ou produire selon votre désir ou vos exigences pour un secteur particulier. La police Elementor personnalisée vous fournit des formats de police facilement personnalisables. Il vous permet de créer, de modifier ou d'ajuster efficacement des fonctions supplémentaires par rapport à l'utilisation des polices régulières ou par défaut.

Vous trouverez cinq types de formats de police personnalisés sur votre site Elementor, les voici :

1. Le Web Open Font Format (WOFF) - WOFF est le format le plus recommandé à utiliser car il est pris en charge par tous les navigateurs modernes
2. Le Web Open Font Format (WOFF 2.0) - Police TrueType ou OpenType qui offre une meilleure compression que WOFF 1.0
3. Polices TrueType (TTF) - Cette police a été développée à la fin des années 1980, par Apple et Microsoft
4. Polices/formes SVG – Les polices SVG permettent d'utiliser SVG comme glyphes lors de l'affichage de texte. Assurez-vous d'utiliser ce format pour prendre en charge les anciennes versions d'iPhone
5. Polices OpenType intégrées (EOT) – Ce fichier de police fonctionne sur IE, mais pas sur les autres navigateurs. Assurez-vous d'utiliser ce format pour prendre en charge les versions antérieures d'IE

Remarque : L'Union européenne ajoute une nouvelle règle au RGPD. Toute personne utilisant des polices Google directement hébergées sur son site Web enfreindrait les règles du RGPD. Et Google infligera une amende de 100 euros à ce site Web. Donc, si vous avez Google Fonts, il doit être hébergé localement ou vous pouvez utiliser vos propres polices personnalisées.

Cependant, vous pouvez également gérer les polices Google de votre site Web à l'aide du plug-in Perfmatters. Consultez la documentation sur la façon d'héberger Google Fonts localement dans WordPress.

Voyons ci-dessous pour savoir comment ajouter des polices au site Elementor :

Comment ajouter une police aux sites Web alimentés par Elementor dans WordPress

Vous pouvez ajouter la police personnalisée de deux manières simples-

1. Méthode 1 : ajouter une police à Elementor, y compris les codes
2. Méthode 2 : Utiliser la fonction de police personnalisée d'Elementor

Si vous êtes nouveau sur Elementor, consultez ce blog pratique sur Comment utiliser Elementor correctement.

Méthode 1 : ajouter une police à Elementor à l'aide de codes

Voyons comment vous pouvez ajouter des polices à votre site Elementor en suivant un processus manuel.

• Ajoutez un nouveau dossier « polices » au dossier de votre thème via un client FTP ou en utilisant le cPanel . Le nouveau dossier doit être situé dans wp-content/themes/fonts
• Une fois que vous avez ajouté le nouveau dossier "polices", ajoutez-y tous les fichiers de police
• Maintenant, ouvrez la feuille de style du thème (style.css) et ajoutez-y le code suivant :

 @font-face { font-family: 'nameofnewfont'; src: url("/fonts/nameofnewfont.woff2") format("woff2"), url("/fonts/nameofnewfont.woff") format("woff"); font-weight: normal; font-style: normal; }

• Configurez les éléments qui utiliseront cette police en les ajoutant à la même feuille de style.
• Cette méthode peut être pénible pour les débutants. Chaque fois que vous souhaitez ajouter des configurations telles que "italiques" ou "gras", vous devrez suivre le même processus et ajouter ces paramètres. Il y a beaucoup de codage impliqué.

Pour ceux qui ne souhaitent pas gérer ce processus technique, vous pouvez suivre le processus ci-dessous pour ajouter avec succès des polices personnalisées à votre site Elementor.

Méthode 2 : Utiliser la fonction de police personnalisée d'Elementor

La police personnalisée est une fonctionnalité professionnelle d'Elementor. Assurez-vous donc que vous avez installé et activé les plugins Elementor (gratuit) et Elementor Pro sur votre site Web.

Étape 01 : Ajoutez une police personnalisée à votre site

Tout d'abord, accédez à Elementor> Polices personnalisées

Ici, vous pouvez créer des polices personnalisées. Par exemple, cliquez sur Ajouter nouveau pour créer une structure de police personnalisée.

Donnez un titre à votre police. Et puis cliquez sur Ajouter une variation de police .

Étape 02 : Ajouter une variante de police et télécharger des fichiers de police

Ici, vous pouvez ajouter des options supplémentaires à la police. Tels que l'épaisseur de la police, le style et les fichiers de police.

Téléchargeons un fichier de police personnalisé TTF. Pour cela, cliquez sur le bouton de téléchargement .

Téléchargez le fichier de police à partir de votre appareil ou du dossier situé.

Remarque : Assurez-vous de conserver vos fichiers de polices préférés sur votre appareil avant de les télécharger ici !

Une fois que vous avez terminé, vous pouvez voir les détails de la police à partir d'ici.

En suivant le même processus, continuez le processus de téléchargement du fichier de police pour chaque format. Téléchargeons une autre variante de police. Par exemple, cliquez sur le bouton Ajouter une variation de police et définissez le poids et le style de la police.

Réglez le poids de la police sur 100 et cliquez à nouveau sur le bouton de téléchargement.

Une fois que vous avez téléchargé le fichier, vous pouvez l'ajouter à partir de la galerie multimédia.

Étape 03 : publier la police personnalisée finale

En suivant le même processus, ajoutez différentes variantes de police à votre site. Une fois que vous avez terminé, appuyez simplement sur le bouton Publier .

Étape 04 : Utilisez la police personnalisée pour votre conception Elementor

Maintenant, vous pensez peut-être à la façon d'utiliser cette police personnalisée. Droit? Voyons comment trouver et utiliser cette police personnalisée, vous devez ouvrir l'une de vos pages Elementor sur le panneau de conception Elementor. Et puis ajoutez l'un des widgets de texte sur le panneau.

Ajoutez le widget Heding au panneau d'édition Elementor.

Une fois que vous avez ajouté le widget Texte (en-tête),

• Accédez à la section Style
• Cliquez sur la typographie
• Et ici, vous pouvez trouver la police que vous venez de créer précédemment ( Ma police ). Sélectionnez simplement la police

Une fois que vous avez ajouté la police, il est maintenant temps de découvrir les autres options de typographie pour rendre votre texte ou votre police plus beau et plus attrayant. Tels que la taille de la police, le poids, la transformation, le style, la décoration, l'épaisseur de ligne, et plus encore !

Eh bien, un design extraordinaire pourrait attirer l'attention des clients plutôt qu'un simple. Donc, si vous souhaitez rendre l'en-tête de votre page Web plus intelligent et plus agréable, la section suivante est là pour vous. Ici, nous allons montrer comment vous pouvez styliser votre en-tête à l'aide du widget Happy Addons Animated Text.

Apprenons à concevoir un en-tête Elementor personnalisé

Stylisez votre police avec le widget d'animation de texte Happy Addons

Le widget de texte animé est une fonctionnalité professionnelle de Happy Addons. Vous pouvez rendre votre texte si intéressant et attrayant en utilisant ce widget sympa. Il dispose de 10 dispositions de conception prédéfinies pour réduire vos efforts et difficultés supplémentaires. Ainsi, une fois que vous l'avez ajouté à votre panneau de conception Elementor, il vous suffit de choisir la bonne disposition de conception et de la personnaliser en fonction de la structure de votre page Web.

Voyons concrètement comment vous pouvez utiliser le widget Texte animé sur votre site WordPress au lieu d'un texte ou d'une police ordinaire.

Pour commencer, vous devez installer et activer ces plugins :

1. Gratuit
2. Happy Addons Gratuit et Pro

Étape 1 : Ajouter un widget de texte animé

Tout d'abord, glissez-déposez le widget depuis la galerie de widgets.

Vous obtiendrez la vue initiale du widget sur l'écran.

Utilisez le texte de police personnalisé que vous avez créé précédemment. Pour le sélectionner, appuyez sur le bouton style, typographie et choisissez Mes polices .

Étape 2 : Ajoutez des motifs à votre texte

Maintenant, appuyez à nouveau sur la section de contenu. Et choisissez le design qui vous plaît le plus.

Une fois que vous avez confirmé la conception, il est maintenant temps d'ajuster le style d'animation. Pour ce faire, cliquez sur le contenu et trouvez-y le type d'animation . Explorez chaque type un par un pour obtenir un meilleur résultat pour votre site Web.

Remarque : Délai d'animation en millisecondes. Min 1000 et Max 30000.

Étape 3 : Voir la sortie finale de votre texte animé sur la page Web

Voyons le résultat final après avoir personnalisé le widget de texte animé sur votre police.

C'est ainsi que le widget Texte animé de Happy Addons aide à modérer vos polices ou votre texte ennuyeux. Cependant, si vous souhaitez obtenir une présentation détaillée de ce widget, vous pouvez consulter la documentation officielle de ce widget.

Ou, pour une meilleure visualisation, vous pouvez consulter le didacticiel vidéo de texte d'animation ci-dessous.

Quelques requêtes générales sur les polices personnalisées Elementor

Prêt à explorer la fonctionnalité de police personnalisée Elementor ?

Les polices personnalisées ont diverses fonctionnalités. De l'établissement d'un style de marque unique à l'acquisition de plus de clients, les polices personnalisées prennent toujours en charge les spécialistes du marketing, les concepteurs ou les propriétaires de sites Web. En plus d'utiliser les polices Google habituelles, les polices personnalisées pourraient aider votre entreprise en ligne à attirer plus de clients grâce à son style et son apparence uniques.

Nous espérons donc que ce tutoriel Elementor enrichira vos connaissances pour utiliser intelligemment les polices personnalisées sur votre site WordPress. De plus, le widget de texte animé de Happy Addons vous aidera à modifier le texte au niveau suivant et à ajouter une valeur supplémentaire à la conception globale du site Web.

Si vous aimez ce tutoriel, vous pouvez vous inscrire à notre newsletter pour lire des articles plus intéressants comme le tutoriel WordPress, le tutoriel Elementor, des trucs et astuces et les dernières mises à jour !