Comment ajouter des polices personnalisées à des modèles d’e-mails

Objectif de cet article

Apprenez à ajouter des polices à l’éditeur de modèles d’e-mails de Klaviyo pour que vos messages reflètent le style de votre marque. Dans cet article, vous découvrirez également les inconvénients liés à l’utilisation de polices personnalisées et nous verrons comment choisir une police prise en charge par la plupart des boîtes de réception.

Dans vos e-mails, vous pouvez utiliser les polices Google Fonts, Adobe Typekit ou des polices importées (c.-à-d., auto-hébergées). Toutefois, n’oubliez pas que seules certaines boîtes de réception prennent en charge les polices personnalisées et que de nombreux clients de messagerie répandus (comme Gmail et Yahoo) ne sont pas compatibles avec cette fonctionnalité. 

Définitions

• Police personnalisée
  Toute police qui n’est pas fournie par défaut dans l’éditeur de Klaviyo.
• Police web
  Police personnalisée qui doit être chargée à partir d’une source externe.
• 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 par défaut
  Une police adaptée aux pages web utilisée pour afficher votre message dans les boîtes de réception qui ne prennent pas en charge votre police personnalisée.

Prise en charge et limites des polices personnalisées

Les polices personnalisées renforcent la cohérence de vos supports marketing en harmonisant le style de vos e-mails avec celui de votre site d’e-commerce. Toutefois, les polices web (c’est-à-dire celles chargées à partir d’une source externe, qui ne sont pas stockées sur l’appareil) risquent de ne pas s’afficher comme prévu sur tous les appareils ou clients de messagerie. Les polices standard proposées par Klaviyo sont préinstallées sur la grande majorité des appareils, ce qui vous permet de créer une expérience cohérente pour tous vos abonnés.

Voici quelques clients de messagerie qui prennent en charge les polices web :

• Apple Mail
• iOS Mail (le client de messagerie par défaut sous iOS)
• Google Android (sauf Android 2.3, qui ne prend pas en charge la méthode @import utilisée par les polices Google et Adobe)
• Samsung E-mail (Android 8.0)
• Outlook pour Mac

Polices personnalisées dans Gmail et d’autres boîtes de réception non prises en charge

Parmi vos destinataires, ceux qui utilisent Gmail (ou d’autres boîtes de réception qui ne prennent pas en charge les polices personnalisées) peuvent voir votre police par défaut (que vous pouvez définir dans votre modèle d’e-mail) plutôt que la police personnalisée que vous avez choisie. Pour éviter ce problème, choisissez une police personnalisée adaptée aux pages web. Ces polices sont déjà disponibles sur la plupart des appareils, qu’ils soient compatibles ou non avec les polices web.

Vous trouverez ici une liste de polices adaptées aux pages web, avec un aperçu de leur compatibilité avec les différents types d’appareils.

Ajouter une police personnalisée à l’éditeur de modèles d’e-mail

Pour ajouter une police personnalisée à un modèle d’e-mail, suivez la procédure ci-dessous :

1. Dans votre modèle, ouvrez un bloc de texte ou accédez à l’onglet Styles.
2. Faites défiler la liste déroulante des polices jusqu’en bas, puis cliquez sur Add Font.
3. Dans la fenêtre modale qui s’affiche, choisissez Police Google, Police Adobe ou Importer une police, en fonction de la source de votre police.
4. Parmi les sections ci-dessous, suivez les instructions de celle qui correspond à votre type de police (Google, Adobe ou une police téléchargée).

Une fois que vous avez ajouté une police à un modèle d’e-mail, elle est disponible pour tous les autres modèles, mais aussi pour vos formulaires d’inscription.

Ajouter des variantes à une police personnalisée existante

Vous pouvez toujours modifier ou supprimer les variantes sélectionnées de vos polices personnalisées sous Bibliothèque de marque > Polices.

Mettre à jour une police existante

Pour sélectionner d’autres variantes d’une police personnalisée de Google ou importée déjà ajoutée, suivez les étapes décrites ci-dessous : 

1. Dans Klaviyo, accédez à Content > Images & brand.
2. Cliquez sur Fonts.
3. Sous Your Fonts, recherchez la police que vous souhaitez modifier.
4. Dans la carte correspondant à cette police, cliquez sur les trois points dans le coin supérieur droit.
5. Dans le menu qui s’affiche, cliquez sur Edit.
6. Cliquez sur # font variants selected pour développer la liste des variantes.
7. Sélectionnez celles que vous souhaitez ajouter.
8. Cliquez sur Update Font.

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.   

Si vous recevez le message d’erreur A font with this name already exists, suivez les étapes ci-dessus pour modifier la version existante de la police au lieu de l’ajouter à nouveau.

Supprimer une police

1. Dans Klaviyo, accédez à Content > Images & brand.
2. Cliquez sur Fonts.
3. Sous Your Fonts, recherchez la police que vous souhaitez modifier.
4. Dans la carte correspondant à cette police, cliquez sur les trois points dans le coin supérieur droit.
5. Dans le menu qui s’affiche, cliquez sur Supprimer.

Tous les messages dans Klaviyo qui utilisent actuellement la police personnalisée utiliseront immédiatement la police de secours. Si vous ajoutez à nouveau la police,les nouveaux e-mails recommenceront à l’utiliser. 

Polices Google

Pour ajouter une police Google, il vous suffit de saisir son nom. Choisissez une police par défaut, puis cliquez sur Add Font.

Polices Adobe

Les polices Adobe ne sont disponibles que pour les utilisateurs ayant un abonnement Adobe Fonts actif. Pour les ajouter, cliquez sur Adobe Font et collez votre adresse CSS. L’adresse doit suivre le format suivant : https://use.typekit.com/123ABC.

Choisissez une police par défaut, puis cliquez sur Add Font.

Polices importées

Parfois appelées polices auto-hébergées, les polices importées ne sont recommandées qu’aux expéditeurs qui ont accès à un développeur. Vous ne pouvez pas télécharger directement le fichier de police sur Klaviyo. Si vous n’avez pas accès à une équipe de développeurs, nous vous recommandons de trouver une police Google ou Adobe similaire à la police souhaitée.

Pour utiliser une police importée, vous devez d’abord l’héberger, que ce soit sur vos serveurs ou via un service dédié. Veillez à activer le Cross-Origin Resource Sharing (CORS) en définissant l’en-tête Access-Control-Allow-Origin sur *, de sorte que les boîtes de réception de vos destinataires puissent accéder à la police. En savoir plus sur le CORS.

Une fois la police hébergée, cliquez sur Import Font dans la fenêtre modale Add Font et collez l’URL de votre police dans le champ Source address. Renseignez le nom, l’épaisseur et le style de votre police dans les champs correspondants.

Enfin, choisissez une police par défaut et cliquez sur Add Font.

À propos des polices par défaut

Pour tous les types de polices personnalisées, vous devez sélectionner une police par défaut. Si votre police personnalisée est bloquée par le client de messagerie de certains de vos destinataires, c’est la police par défaut qui s’affiche à la place. Dans la liste des options disponibles, choisissez-en une qui ressemble à votre police personnalisée.

Par exemple, si vous utilisez Poppins (une police Google) comme police personnalisée et Arial comme police par défaut, les destinataires de l’e-mail verront les polices suivantes :

• Ceux qui ouvrent votre e-mail dans un client de messagerie qui prend en charge les polices web (par exemple Apple Mail ou iOS Mail) verront bien la police Poppins.
• Ceux qui utilisent un client de messagerie qui ne prend pas en charge les polices web (par exemple Gmail) verront la police Arial à la place.

Appliquer une police personnalisée

Une fois que vous avez défini une police personnalisée, vous pouvez l’appliquer à n’importe quel texte de votre modèle, par exemple :

• Dans les styles principaux de votre modèle
• Dans tous les styles de blocs
• Dans une partie spécifique d’un bloc de texte
• Dans les blocs de bouton, de produit et tous les autres types de blocs contenant du texte

Dans un bloc de texte, sélectionnez la partie à laquelle vous souhaitez appliquer la police personnalisée, puis sélectionnez-la dans la liste déroulante.

Pour tous les autres types de blocs, ou pour les styles de blocs et de modèles, sélectionnez la police dans la liste déroulante correspondante.

Dans les blocs du tableau et les blocs de fractionnement, 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 de gauche affichera votre police de secours au lieu de la police personnalisée. 

Prévisualiser vos polices personnalisées

Une fois que votre modèle est prêt, envoyez-vous un e-mail d’aperçu en cliquant sur Preview & test > Send Test. Essayez d’ouvrir le message sur plusieurs appareils pour voir comment il apparaîtra pour différents destinataires. Vous pouvez également utiliser un outil comme Email on Acid pour tester votre message sur davantage d’appareils.

Ressources supplémentaires

• Guide de l’éditeur de modèles d’e-mail
• Comprendre les polices dans les e-mails