Comment ajouter des polices personnalisées à Elementor et Elementor pro

Pour les concepteurs de sites web.style calligraphiqueLe style et la mise en page sont essentiels. Les polices de caractères adéquates rendent la page plus claire, plus facile à lire et plus attrayante. En fonction de la Elementor L'affirmation selon laquelle 90% de la conception des sites web provient des polices de caractères.

existent WordPress Plus de 800 polices peuvent être utilisées par défaut sur un site web. Cependant, si vous souhaitez donner une personnalité à votre site, vous devez ajouter des polices personnalisées, et Elementor offre la possibilité de télécharger et d'utiliser des polices personnalisées.

Cet article décrit comment utiliser Elementor avecElementor proUne méthode complète pour ajouter des polices personnalisées à Elementor. Avant d'entrer dans les détails, il convient de comprendre les fonctionnalités et les sources de polices d'Elementor.

Introduction aux polices personnalisées d'Elementor

La personnalisation signifie une solution construite pour les besoins individuels, et Elementor prend en charge le téléchargement des cinq formats de polices suivants :

• WOFF (Web Open Font Format): bien pris en charge par les navigateurs modernes
• WOFF 2.0La technologie TrueType : supporte TrueType ou OpenType pour des taux de compression plus élevés.
• TTF (polices TrueType): Développée par Apple et Microsoft
• Polices SVGAdaptation aux iPhones plus anciens : Adaptation aux iPhones plus anciens
• EOT (Embedded OpenType Fonts)Compatible avec les anciennes versions d'Internet Explorer

Remarque : le nouveau règlement GDPR de l'UE stipule clairement que le chargement de polices directement à partir de Google peut constituer une violation et entraîner une amende. Il est recommandé d'héberger localement les polices Google ou d'utiliser des polices personnalisées.

Il est recommandé d'utiliser le plugin Perfmatters pour gérer les polices localement, qui peut être configuré en se référant à la documentation correspondante.

Accès aux polices personnalisées

La conception de vos propres polices de caractères requiert un large éventail de compétences telles que la typographie, l'encodage des polices, la conversion des formats et l'octroi de licences. Si vous ne possédez pas ces compétences, vous pouvez utiliser des polices gratuites ou payantes fournies par des concepteurs professionnels.

Les sites suivants sont couramment utilisés pour le téléchargement de polices de caractères :

• Polices de caractères Google
• Police Écureuil
• Espace polices
• DaFont
• Fonderie ouverte

Prenons l'exemple de DaFont et montrons les étapes de téléchargement comme suit :

Étape 1 : Visitez DaFont.com pour télécharger des polices.

Allez sur le site Web de DaFont et cliquez sur le bouton Télécharger à côté de votre police préférée.

Étape 2 : Décompresser le fichier de police

Téléchargé sous forme d'archive ZIP, veuillez le décompresser avant de l'utiliser.

Elementor ne prend en charge que certains formats de polices et ne peut pas télécharger le fichier zip lui-même.

Étape 3 : Sélectionner les formats de police disponibles

Dans le fichier décompressé, recherchez l'inclusion de l'élément .ttf ou autre Elementor Formats pris en charge. Mémorisez ce fichier, il sera utilisé dans les tutoriels suivants.

Ajouter des polices à Elementor et Elementor pro

Le processus est différent entre les deux versions ; la fonction Custom Fonts (polices personnalisées) fournie avec Elementor n'est disponible que dans la version Pro, mais peut être mise en œuvre dans la version gratuite à l'aide d'un plug-in.

Méthode 1 : Ajouter des polices personnalisées dans Elementor Free Edition

Les plug-ins sont recommandés :Polices de caractères personnalisées peut-être Polices Typekit personnaliséesVoici des exemples de polices personnalisées. Voici un exemple de polices personnalisées :

Étape 1 : Installer le plugin Custom Fonts

entrer dans WordPress Dans le backend, cliquez sur Plugins > Ajouter un nouveau, recherchez "Custom Fonts", installez-le et activez-le.

Une fois activées, les polices personnalisées apparaissent dans le menu Apparence, cliquez dessus, puis cliquez sur "Ajouter une nouvelle police".

Étape 2 : Télécharger et nommer les polices

Dans l'onglet Polices locales, cliquez sur "Choisir un fichier" pour télécharger le fichier. .ttf Fichier de police. Saisissez le nom de la police, par exemple "Sunday Grapes".

Vous pouvez ajouter plusieurs variantes de polices et prévisualiser l'effet. Cliquez sur "Enregistrer la police" pour sauvegarder les paramètres.

Étape 3 : Testez les polices dans Elementor pour voir si elles fonctionnent.

Ouvrez une page ou un article et allez dans l'éditeur Elementor. Faites glisser le composant Heading ou Text Editor.

Recherchez la police que vous venez d'ajouter dans Style > Typographie > Famille. Si "Sunday Grapes" apparaît, l'ajout a été effectué avec succès.

Il en va de même pour le plugin Custom Typekit Fonts.

Méthode 2 : Ajouter des polices dans Elementor Pro en utilisant les fonctions intégrées

Conditions préalables : Activé Elementor pro.

Étape 1 : Accéder à la page de gestion des polices

Allez dans Elementor > Custom Fonts et cliquez sur "Add New" pour ajouter une nouvelle police.

Saisissez le nom de la police, par exemple "Ma police", et cliquez sur "Ajouter une variation de police".

Étape 2 : Téléchargement du fichier de police et définition des paramètres

Sélectionnez le style de police, le poids, etc. et cliquez sur le bouton de téléchargement pour ajouter le fichier. .ttf Documentation.

Répétez l'opération pour ajouter plusieurs variantes. Par exemple, fixez le poids à 100 et téléchargez le fichier correspondant.

Une fois le téléchargement terminé, le téléchargement à partir de l'applicationmédiathèqueSélectionnez le fichier de police dans la fenêtre

Étape 3 : Publication des polices

Une fois la configuration terminée, cliquez sur "Publier" pour publier la police.

Étape 4 : Utilisation de polices sur les pages Elementor

Allez sur n'importe quelle page et faites glisser le composant Texte ou Intitulé.

Sélectionnez la police que vous avez téléchargée (par exemple "Ma police") dans Style > Typographie > Famille.

Vous pouvez continuer à ajuster la taille de la police, le style, l'épaisseur, la décoration, etc. pour créer l'effet visuel que vous souhaitez.

Méthode 3 : Utiliser un code pour ajouter des polices manuellement

Convient aux utilisateurs disposant d'une base de code :

1. existent wp-content/themes/votre-thème/ nouvellement construit sous polices de caractères dossier (papier)
2. Télécharger les fichiers de polices dans ce répertoire
3. Dans le cadre du thème style.css Ajoutez le code suivant au fichier

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

4. existent CSS La police de caractères est appelée, par exemple

h1, h2 {
font-family : 'MyCustomFont', sans-serif ;
}

Si vous souhaitez ajouter un style italique ou gras, vous devez ajouter les règles correspondantes.

Résumé des questions fréquemment posées

Q : Après avoir ajouté des polices Elementor Indisponible en ?

Si la police est une exception dans le composant Elementor, il est recommandé de régler la police sur Default et de resélectionner l'option Typography.

Q : Comment ajouter des polices manuellement dans WordPress ?

1. Téléchargez les polices et décompressez-les
2. télécharger wp-content/themes/votre-thème/polices
3. existent style.css Ajouter une règle de police et appeler

Q : Des polices OTF sont-elles disponibles ?

1. Installer le plugin Custom Fonts
2. Télécharger les fichiers OTF dans Apparence > Polices personnalisées
3. Les formats pris en charge sont WOFF2, WOFF, TTF, EOT, OTF, SVG.

Q : Quelles sont les étapes à suivre pour ajouter des polices sans plug-ins ?

1. Obtenir des polices de Google Fonts
2. Copier le code intégré
3. bâton En-tête> district
4. Appeler des polices dans les fichiers de style

remarques finales

Les polices personnalisées peuvent ajouter de la personnalité à la conception d'une page et jouer un rôle important dans l'expression de la marque. L'utilisation de polices personnalisées est une excellente option si les polices par défaut ne répondent pas à vos besoins visuels. Nous espérons que ce tutoriel vous a fourni des idées claires et complètes sur la manière de procéder et qu'il vous a aidé à télécharger et à appliquer les polices.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.

© Déclaration de reproduction

Cet article a été écrit par : les voleurs seront des souris et des rats.

Lien vers cet article :https://www.361sale.com/fr/58388
L'article est protégé par le droit d'auteur et doit être reproduit avec mention.