Comment héberger une police personnalisée sur votre site
Objectif de cet article
Découvrez comment héberger une police personnalisée, c’est-à-dire une police qui n’est pas hébergée par Google ou Adobe, sur votre site d’e-commerce, puis l’importer pour l’utiliser dans vos formulaires d’inscription Klaviyo. Si vous souhaitez utiliser une police importée dans votre formulaire d’inscription, 2 options s’offrent à vous :
- Utiliser la police publique hébergée sur votre site web
- Héberger votre propre police publiquement et utiliser l’URL pour l’importer dans vos formulaires d’inscription
Cet article vous explique comment charger une police personnalisée sur votre site d’e-commerce pour l’utiliser dans vos formulaires, mais pas dans vos modèles d’e-mails. Pour plus d’informations sur l’ajout de polices personnalisées à vos modèles d’e-mails, consultez notre article dédié.
Avant d’importer une police, assurez-vous que son fichier WOFF, WOFF2, TTF ou EOT dispose d’une URL HTTPS accessible publiquement. L’hébergeur de la police doit autoriser le partage de ressources entre origines (CORS), afin que Klaviyo et les navigateurs de vos visiteurs puissent charger le fichier. Si Klaviyo indique qu’un fichier de police n’a pas pu être consulté, vérifiez l’URL et les paramètres CORS de l’hôte.
Utiliser la police de votre site web
Utilisez l’URL publique d’un fichier de police sur votre site pour l’importer dans Klaviyo. Les étapes ci-dessous utilisent Chrome DevTools pour trouver l’URL.
Veuillez noter que cette méthode d’hébergement de police personnalisée n’est pas prise en charge par les boutiques Shopify.
- Rendez-vous sur votre site.
- Cliquez avec le bouton droit de la souris sur la page, puis sélectionnez Inspect.
- Ouvrez Réseau et sélectionnez le filtre Police.
- Actualisez la page pour afficher la liste des fichiers de police chargés par cette page.
- Sous Name, sélectionnez le fichier de police que vous souhaitez importer. Si le nom de fichier est une suite de chiffres et de lettres, sélectionnez Aperçu pour vous aider à identifier la police.
- Faites un clic droit sur la requête de police et sélectionnez Copier > Copier l’URL. Utilisez cette URL dans la section Importer votre police dans Klaviyo ci-dessous.
Charger une police auto-hébergée
Pour commencer, si la police que vous souhaitez utiliser n’est pas déjà hébergée publiquement en ligne, téléchargez-la sur votre ordinateur. Veuillez noter que le fichier doit être au format WOFF, WOFF2, TTF ou EOT pour pouvoir être utilisé dans Klaviyo. Par ailleurs, faites preuve de prudence en téléchargeant des fichiers de polices sur Internet, car ils peuvent contenir des logiciels malveillants. Ensuite :
- Importez le fichier de police dans un emplacement public sur votre site e-commerce, en suivant les instructions de votre plateforme ci-dessous.
- Enregistrez le téléchargement et copiez l’URL HTTPS publique du fichier.
Pour plus d’informations sur l’ajout d’un fichier à votre site, consultez le Centre d’aide de votre plateforme e-commerce :
Importez votre police dans Klaviyo
Une fois que vous avez l’URL du fichier de police, suivez ces étapes pour l’ajouter à votre bibliothèque de polices Klaviyo.
- Dans Klaviyo, accédez à Contenu > Médias et marque > Marque. Ouvrez Polices ou, si votre page comporte un onglet Style, ouvrez-le pour trouver la section Polices.
- Sélectionnez Ajouter une police et choisissez Police personnalisée.
- Saisissez un nom de police personnalisée. Sous URL source, collez l’ URL du fichier de police.
- Sélectionnez les options Graisse de la police et Style de la police qui correspondent au fichier. Par exemple, utilisez Normal 400 et Normal pour un fichier de police standard, non italique. Si la police est déjà utilisée sur votre site, faites correspondre sa graisse et son style existants afin d’éviter de modifier son affichage.
- Facultatif : sélectionnez Ajouter une variante de police pour chaque épaisseur ou style supplémentaire. Saisissez une URL distincte et une épaisseur et un style correspondants pour chaque variante.
- Passez en revue la police de secours et choisissez la police de secours à utiliser si votre police personnalisée ne peut pas se charger. Sélectionnez Enregistrer.
Après l’enregistrement, votre police est disponible dans la section Polices. Suivez les étapes pour utiliser votre police personnalisée dans un formulaire d’inscription afin de l’appliquer à votre formulaire et de publier vos modifications.
Polices du site affectées par Klaviyo.js
Le JavaScript onsite de Klaviyo (Klaviyo.js) doit être installé manuellement ou via vos intégrations e-commerce pour que les formulaires d’inscription Klaviyo s’affichent sur votre site web. Lorsque les formulaires se chargent, Klaviyo.js ajoute à votre site les définitions de polices enregistrées dans votre bibliothèque de polices Klaviyo. Si elles utilisent la même famille de polices que votre site, avec des graisses ou des styles différents, elles peuvent modifier l’apparence du texte sur le site, par exemple la graisse d’un en-tête.
Deux options s’offrent à vous pour remédier aux modifications apportées à vos polices par Vous avez le choix entre :
- Supprimez les polices concernées de votre bibliothèque de polices Klaviyo. Avant de supprimer, vérifiez tous les formulaires qui utilisent la police : si la police n’est plus disponible, ils afficheront leur police de remplacement.
- Mettez à jour le CSS de votre site pour utiliser la famille de polices, la graisse et le style prévus lorsque Klaviyo.js charge vos variantes de polices enregistrées.
Étant donné que cette alternative nécessite des connaissances approfondies en CSS, vous aurez peut-être besoin de l’aide d’un développeur. Klaviyo ne peut pas vous aider à ajuster le CSS de votre site. Toutefois, nous travaillons avec un large réseau de partenaires.