Comment utiliser des polices personnalisées dans les formulaires d’inscription
Objectif de cet article
Découvrez comment concevoir vos formulaires d’inscription avec des polices personnalisées afin que vos clients bénéficient d’une forte identité de marque et d’une cohérence avec le reste de votre site.
Créer un formulaire d’inscription au design soigné est essentiel pour les inciter à aller au bout de l’objectif de votre formulaire. Si votre marque utilise des polices qui ne sont pas disponibles nativement dans l’éditeur de formulaires d’inscription, l’ajout de ces polices personnalisées est un moyen simple de faire en sorte que vos formulaires s’intègrent harmonieusement au reste de votre site. Après avoir ajouté vos polices, vous pouvez utiliser votre police pour personnaliser vos formulaires d’inscription comme vous le souhaitez.
Définitions
- Police personnalisée
Toute police qui n’est pas fournie par défaut dans l’éditeur de Klaviyo. Il s’agit des numéros suivants :- Polices Google
- Polices Adobe
- Polices importées
- Police adaptée aux pages web
Police stockée en local sur la plupart des appareils et qui n’a donc pas besoin d’être chargée à partir d’une source externe pour être affichée. - Police de secours
Police web sécurisée utilisée si une page ne parvient pas à charger la police principale.
Ajouter des polices personnalisées à votre compte
Dans le menu principal situé sur le côté gauche, accédez à Contenu > Images et marque. À partir de là, cliquez sur l’onglet Polices. Vous pouvez ajouter une police Google, une police Adobe ou une police importée.
Si vous ajoutez à Klaviyo une police personnalisée déjà utilisée sur votre site, téléchargez le style exact (par exemple : léger, gras ou italique) et l’épaisseur (par exemple : 400) actuellement utilisés par votre site. Si vous téléchargez une police et sélectionnez un style ou une épaisseur légèrement différents, les styles sélectionnés dans Klaviyo peuvent remplacer certains styles de police existants sur votre site.
Ajouter une police Google
Pour ajouter une police Google :
- Sélectionnez la liste déroulante Nom de la police pour afficher la liste de toutes les polices Google disponibles, à l’exception de celles que vous avez déjà chargées dans votre compte.
- Choisissez la police souhaitée. Une fois la police sélectionnée, vous verrez un aperçu de la police sous la liste déroulante, ainsi que le nombre de variantes possibles (par ex., gras, italique, etc.).
- Si vous souhaitez ajouter plus d’une variante, cliquez sur la flèche à côté du nombre de variantes possibles et choisissez les polices que vous souhaitez ajouter.
- Sélectionnez une police par défaut.
- Cliquez sur Ajouter une police. La police que vous avez ajoutée s’affichera désormais dans la section Vos polices, en bas de la page.
À partir de la section Vos polices , vous pourrez voir les polices que vous avez ajoutées à votre compte. Pour modifier ou supprimer l’une de vos polices dans cette section, sélectionnez les trois points sur la police.
Si vous choisissez d’utiliser les polices Google Fonts, à des fins de RGPD, veuillez noter que Google Fonts est hébergé par Google. Gardez cette information à l’esprit si vous ajoutez une telle police à votre bibliothèque. Klaviyo propose une sélection de polices personnalisées que nous utilisons dans nos modèles de formulaire d’inscription, que vous pouvez facilement importer et utiliser. Afficher la liste des polices hébergées par Klaviyo.
Ajout d’une police Adobe
Vous devez disposer d’un compte Adobe pour utiliser les polices Adobe.
Pour ajouter une police Adobe :
- Accédez à Adobe Fonts.
- Recherchez votre lien de police Adobe, puis sélectionnez votre police.
- À côté du nom de votre police, cliquez sur l’icône de code.
- Si nécessaire, saisissez un nouveau nom de projet, puis cliquez sur Enregistrer.
- Dans la fenêtre modale suivante, copiez l’URL https://use.typekit.net de la police que vous souhaitez ajouter. N’incluez pas le .css dans l’URL lorsque vous la copiez.
- Retournez sur Klaviyo et collez l’URL dans le champ Adresse CSS.
- Sélectionnez Continuer, puis choisissez une police de secours pour la police que vous souhaitez importer. Notez que si une police est déjà disponible dans votre compte, une coche verte s’affiche à côté de la police et sa police de secours existante s’affiche.
- Sélectionnez Ajouter une police.
Une fois votre police ajoutée, elle sera répertoriée dans la section Vos polices en bas de la page. Pour modifier l’une de vos polices dans cette section, sélectionnez les trois points sur la police.
Ajout d’une police importée
Si vous avez acheté ou téléchargé une police personnalisée qui n’est pas hébergée par une source tierce, vous pouvez tout de même l’utiliser dans un formulaire Klaviyo. Tout d’abord, hébergez les fichiers de police dans un emplacement qui sera accessible à Klaviyo (par exemple, dans les ressources de votre site ou sur une plateforme d’hébergement de polices). Veillez à activer le Cross-Origin Resource Sharing (CORS) en définissant le Access-Control-Allow-Origin header sur *, de sorte que les appareils de vos destinataires puissent accéder à la police.
Pour ajouter une police importée :
- Nommez votre police.
- Spécifiez une épaisseur de police, un style et une URL source. L’URL source doit être une URL valide se terminant par WOFF, WOFF2, TTF, EOT ou SVG.
- Facultatif : pour ajouter d’autres variantes, sélectionnez Ajouter une variante de police, puis répétez l’étape 2 pour cette variante.
- Sélectionnez Ajouter une police pour ajouter cette police à la section Vos polices .
Dans Vos polices, vous pourrez voir les polices que vous avez importées dans votre compte. Vous pouvez également supprimer ou modifier vos polices en sélectionnant les 3 points sur la police.
Modifier la police
Pour modifier une police personnalisée existante :
- Accédez à Content > Images & Brand > Fonts.
- Dans la section Vos polices en bas de la page, recherchez la police que vous souhaitez modifier.
- Dans la carte correspondant à cette police, cliquez sur les 3 points dans le coin supérieur droit.
- Choisissez Modifier. À partir de là, vous pourrez :
- Modifiez la police de secours pour toute police personnalisée.
- Pour les polices Google et hébergées par Klaviyo uniquement, modifiez ou ajoutez des variantes aux variantes sélectionnées en sélectionnant # de variantes de police pour développer la liste, puis en sélectionnant les polices que vous souhaitez ajouter.
Vous ne pouvez pas ajouter de variantes à une police Adobe après l’avoir téléchargée, car les variantes sont intégrées à votre lien Typekit. Pour ajouter des variantes à une police Adobe, vous devez supprimer la police existante et l’ajouter à nouveau en utilisant un autre lien Typekit qui comporte toutes les variantes que vous souhaitez inclure.
- Lorsque vous avez terminé de modifier votre police, sélectionnez Mettre à jour la police.
Supprimer une police
Pour supprimer une police :
- Accédez à la section Vos polices .
- Sur la police que vous souhaitez supprimer, cliquez sur les 3 points, puis choisissez Supprimer. Si vous choisissez de supprimer votre police, une fenêtre modale s’affichera pour vous informer que, si votre police est utilisée dans des formulaires, votre police de secours s’affichera après la suppression de la police que vous avez ajoutée.
- Sélectionnez Supprimer.
Une fois une police personnalisée supprimée, tous les formulaires dans Klaviyo qui utilisent actuellement la police personnalisée reviendront immédiatement à la police de secours. Si vous ajoutez à nouveau la police, ces formulaires recommenceront à l’utiliser.
Utiliser des polices personnalisées dans le concepteur de formulaire d’inscription
Pour utiliser votre police personnalisée dans un formulaire d’inscription, modifiez simplement le texte dans l’aperçu du formulaire :
- Accédez à l’onglet Formulaires d’inscription.
- Recherchez le formulaire que vous souhaitez modifier et cliquez sur les 3 points à côté, puis sélectionnez Modifier le formulaire.
- Dans l’aperçu du formulaire, sélectionnez le texte que vous souhaitez modifier.
- Dans le menu Texte à droite, mettez le texte en surbrillance.
- Utilisez la liste déroulante des polices en haut pour sélectionner votre police personnalisée. Notez que les polices de la section Vos polices de votre compte apparaîtront en haut de la liste.
Pendant la modification, votre police personnalisée apparaîtra dans le canevas (par exemple, l’aperçu de modification), mais pas dans le panneau sur le côté gauche. Le panneau sur le côté gauche affichera votre police de secours au lieu de la police personnalisée.
- Une fois vos modifications terminées, cliquez sur Publier pour les mettre en ligne.
Polices du site affectées par Klaviyo.js
Le tracking Active on Site de Klaviyo (Klaviyo.js), doit être installé manuellement ou par le biais de vos intégrations d’e-commerce afin de publier les formulaires d’inscription Klaviyo sur votre site web. Si vous n’avez chargé que quelques variantes de polices, Klaviyo.js charge les variantes restantes dans votre bibliothèque lors de son intégration dans votre site. Par conséquent, les polices de votre site peuvent être légèrement modifiées au cours de ce processus, notamment l’épaisseur de l’en-tête du site.
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.
- Mettez à jour le CSS de l’en-tête de votre site afin qu’il ne soit pas remplacé lorsque Klaviyo.js charge les variantes supplémentaires.
É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, mais nous travaillons avec un large réseau de partenaires.