timer ~ 8 min lu
86789 vues
évaluez-le
06 décembre 2018

Comment ajouter et utiliser des polices personnalisées avec Stripo

Stripo / Blog / Comment ajouter et utiliser des polices personnalisées avec Stripo

Le 26 novembre 2018, nous avons publié une nouvelle option — maintenant avec Stripo, vous pouvez ajouter des polices personnalisées aux projets en quelques clics, sans aucune compétence en HTML. Pourquoi est-ce important ?

Ce n'est pas un secret qu'une bonne copie complète le design de l'e-mail et qu'elle convainc les clients de faire un achat.

Généralement, les polices personnalisées sont utilisées pour rendre la copie du texte cohérente par rapport à la marque et attrayante. Et en l'enveloppant dans une police qui correspond le mieux à la situation et à la conception de l'e-mail, vous rendez votre texte perceptible et attrayant. Ainsi, bien souvent, les polices sécurisées pour le web ne suffisent pas.

Exemple de bannière de polices personnalisées _ Stripo

Dans ce cas, vous devrez utiliser des polices personnalisées.

Regardez une courte vidéo qui explique comment ajouter des polices personnalisées avec Stripo. Veuillez noter que cette fonctionnalité n'est disponible que pour les plans payants.

Comment ajouter des polices personnalisées avec Stripo

La plupart des ESPs et des constructeurs d'e-mail ne proposent que des polices sécurisées pour le web, alors que Stripo en propose quatre ensembles :

Les ensembles de polices que Stripo propose

Stripo propose quatre ensembles de polices pour vos e-mails:

1. Polices standard/sécurisées pour le web

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, et Verdana sont les polices les plus populaires, car elles sont largement utilisées par les sites web et s'affichent correctement dans la plupart des clients e-mail.

Polices personnalisées Arial _ Stripo

2. Polices non standard

Ce sont les polices de caractères dont certains professionnels se demandent encore si elles sont sûres ou non pour le Web. Mais elles sont couramment utilisées sur le web. Par exemple, la police Playfair Display est présente sur près de 1,1 milliard de sites web, et est surtout populaire aux États-Unis et en Europe occidentale.

Foire d'exposition des polices personnalisées _ Stripo

Note : Saviez-vous que vous pouvez diminuer le nombre de polices standard et non standard pour vos projets si vous en trouvez certaines excessives ?

Comment supprimer les polices inutiles de la liste :

  • allez dans les paramètres du projet dans votre compte ;
  • trouvez l'onglet des polices standard/non standard ;
  • cliquez sur le bouton de commutation pour supprimer la police de votre liste.

3. Polices des bannières

Elles sont décoratives et ne peuvent être appliquées qu'aux bannières, car tout texte que vous placez sur les bannières sera considéré comme un élément d'image. Par conséquent, il sera correctement affiché sur tous les appareils, quelle que soit la police que vous appliquez.

Stripo en propose plus de 40.

Polices personnalisées Exemple de police de bannière _ Stripo

Vous ne voyez la liste de ces polices que lorsque vous travaillez avec une légende sur les bannières.

4. Polices personnalisées

Avec Stripo, vous pouvez ajouter absolument toutes les polices que vous souhaitez.

Il n'y a aucune limite au nombre de polices personnalisées à ajouter.

Une fois que vous avez installé de nouvelles polices, appliquez-les au menu et aux textes — à toutes les copies dans les e-mails, à l'exception des bannières.

Comment ajouter une police personnalisée aux paramètres de votre projet avec Stripo :

Une fois encore, j'insiste sur le fait qu'il s'agit d'un processus très simple, car vous n'avez pas besoin de modifier le code HTML de l'e-mail. Autre bonne chose est que vous n'avez pas besoin de définir les mêmes nouvelles polices pour chaque modèle d'e-mail avec lequel vous travaillez — vous les définissez pour des projets entiers. Elles sont disponibles sur votre liste dans toutes vos campagnes de ces projets.

Étape 1. Google

Tout d'abord, vous devez trouver la police que vous aimez le plus. J'ai adoré Great Vibes que j'ai trouvé sur Google Fonts. En plus de plus de 1000 polices, Google propose des combinaisons populaires avec celles-ci.

  • ainsi, vous devez sélectionner la police, faire défiler la section "Styles" et cliquer sur le signe "plus" ;

Polices personnalisées de Google _ Stripo

  • puis, cliquez sur l'icône "Afficher les familles sélectionnées" dans le coin supérieur droit de la page web ;

Voir les familles sélectionnées dans Google Fonts

  • dans une fenêtre pop-up, copiez le lien — il est mis en évidence dans la capture d'écran ci-dessous.

Polices personnalisées Stripo _ Intégration de votre lien

Étape 2. Stripo

Pour l'installer sur votre compte Stripo, vous devez :

  • cliquer sur le nom du compte dans le coin supérieur droit de votre écran ;
  • sélectionner "paramètres de l'organisation" ;

Ajout d'une police personnalisée à votre compte Stripo

  • à gauche, vous verrez "Projets" — cliquez sur l'onglet ;

Polices personnalisées Stripo _ Vos projets

  • sélectionner le projet que vous allez enrichir d'une nouvelle police (je n'en ai qu'une seule) ;
  • cliquer sur le bouton "Paramètres" ;

Polices personnalisées _ Paramètres du projet dans le compte Stripo

  • faire défiler vers le bas pour voir la section "Gestion des polices" ;
  • cliquer sur le bouton "Ajouter une police personnalisée" (j'ai déjà trois polices personnalisées) ;

Polices personnalisées Stripo _ Cliquez pour ajouter votre police personnalisée

  • dans le formulaire pop-up, nommez la police, insérez le lien URL intégré et entrez la famille de polices spécifiée par Google ;

Connexion de votre police personnalisée

Note : pour votre commodité, nous vous recommandons vivement de donner des noms réels aux polices téléchargées.

  • une fois que vous avez rempli correctement tous les champs, cliquez sur "Connecter".

Vous trouverez les nouvelles polices dans la liste défilante lors de l'édition de votre e-mail.

Comment ajouter des polices personnalisées autres que Google aux paramètres de votre projet avec Stripo

Si vous n'avez pas trouvé l'option parfaite sur Google Fonts, ne vous inquiétez pas ! Vous pouvez ajouter n'importe quelle police personnalisée à votre compte Stripo en téléchargeant un lien vers cette police.

Vous pouvez aussi utiliser vos propres polices personnalisées:

  • téléchargez les fichiers de police sur une plateforme ouverte de stockage en cloud ou de partage de fichiers ;
  • assurez-vous que les fichiers sont disponibles pour que les utilisateurs puissent les voir ;
  • ajoutez l'en-tête Access-Control-Allow-Origin à vos fichiers de police pour éviter qu'ils ne soient bloqués par le navigateur ;
  • ajoutez les liens à votre compte Stripo de la manière décrite ci-dessus. Assurez-vous que vos liens commencent par "https" et ne sont pas entourés de guillemets.

Voici un exemple de la façon dont vous pouvez ajouter une police personnalisée à votre compte Stripo avec Adobe Fonts :

  • allez à Adobe Fonts ;
  • choisissez la police que vous aimez et appuyez sur le bouton </> ;

Choisissez votre police personnalisée dans Adobe Fonts

  • entrez le titre de votre projet ;
  • choisissez les tailles et les styles de police ;
  • cliquez sur le bouton “Créer” ;

Adobe Fonts _ Ajouter une police à un projet web

  • copiez le lien ;

Adobe Fonts _ Copier le lien

  • suivez les mêmes étapes que nous avons décrites ci-dessus pour ajouter cette police à votre compte Stripo.

Note : si vous souhaitez utiliser les polices d'Adobe Fonts, vous ne pourrez pas le faire sans un abonnement à Creative Cloud.

Activation des polices dans Adobe Fonts

Comment utiliser des polices personnalisées dans les e-mails

Vous pouvez utiliser la police de votre choix pour les blocs de texte et les menus afin de rendre vos e-mails plus vivants et uniques. Mais assurez-vous de tester leur compatibilité avec les principaux clients de messagerie.

Note: si un client de messagerie ne prend pas en charge la police que vous avez choisie, il la remplacera par une police par défaut (la plupart des clients de messagerie ont deux polices par défaut).

Stripo vous recommande vivement de tester les e-mails et les polices avec Email on Acid ou Litmus, mais aussi d'envoyer cet e-mail à toutes vos adresses e-mail pour voir à quoi ressemble votre police en réalité.

Pour mon test, j'ai choisi la police Alumni Sans. Notre outil de test des e-mails a montré que la plupart des appareils et des clients de messagerie remplaceraient cette police par celles par défaut. Sur les captures d'écran ci-dessous, vous pouvez voir qu'Apple Mail a affiché correctement la police Alumni Sans, tandis qu'Outlook 2019 l'a remplacée par sa police par défaut.

Test des polices personnalisées dans plusieurs clients de messagerie

Les clients de messagerie qui supportent les polices personnalisées dans les e-mails

Il n'y en a que quelques-uns :

  • Apple Mail (police par défaut — Helvetica);
  • Apple iPhone (police par défaut — Helvetica);
  • Thunderbird (police par défaut — Impact);
  • Outlook app pour Android, iOS, et Mac (police par défaut — Calibri);
  • Application de messagerie native d'Android (police par défaut — Roboto).

Note : vous ne pouvez pas être totalement sûr que votre police personnalisée est prise en charge par ces clients de messagerie. Il est donc essentiel de tester votre message avant de l'envoyer.

En choisissant une nouvelle police pour les e-mails, n'oubliez pas :

  1. Seuls certains clients de messagerie supportent les polices personnalisées.
  2. Les polices Sans-serif sont plus faciles à percevoir et conviennent mieux aux textes formels et aux newsletters commerciales.
  3. Il faut plus de temps pour lire un texte écrit en serif pour les personnes souffrant de déficience visuelle et de dyslexie, mais cela fonctionne mieux pour les e-mails de promotion.
  4. Pour les e-mails HTML, 14 px est la meilleure taille de police, mais pour les appareils mobiles, elle est de 16 px.
  5. Pour rendre vos e-mails accessibles, évitez les fonds blancs et les textes alignés au centre.
  6. Dans votre compte Stripo, vous pouvez ajouter de nouvelles polices et supprimer celles que vous n'utilisez pas pour certains projets.

Conclusion

Les polices personnalisées peuvent être un outil formidable pour donner à vos e-mails un aspect professionnel et reconnaissable, mais il est essentiel de tester vos messages avant de les envoyer. Ajoutez des polices décoratives à votre compte et utilisez-les pour rehausser vos modèles de newsletter d'e-mail.

Enrichissez vos e-mails avec des polices personnalisées

Dave Myron il y a 2 ans

Can you update this article to include using non-Google custom fonts?

Hanna Kuznietsova commenté à Dave Myron il y a 2 ans

Dave, Hello... Thank you for your question. We will update the post soon ? As for non-Google custom fonts: You can add custom fonts to your Stripo account only by uploading a link to the selected font. For example, the Adobe Fonts site https://fonts.adobe.com/collections offers links to the fonts and their description ("font-family") for entering information in the proper fields. The embedding link provided by Adobe Fonts needs to be converted to the format specified in the article or input field: it must start with https; no quotes before and after the link. Please do everything as you would do to Google Fonts, as shown in the video. https://www.youtube.com/watch?v=U2X3CLN01zA You can also use your fully custom fonts. Just upload them on your website, and then add the link to your Stripo account. Proven - Adobe fonts work well :) If you need more detailed instructions with screenshots, please write to us at contact@stripo.email.

Reinhard Jung il y a 2 ans

Hey, thanx a lot!

Hanna Kuznietsova commenté à Reinhard Jung il y a 2 ans

Reinhard, Thanks for your supportive feedback. We're glad you liked it :)

Arsen Malashchuk il y a 3 ans

А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?

Hanna Kuznietsova commenté à Arsen Malashchuk il y a 3 ans

Arsen, Спасибо за обращение. Добавлять кастомные шрифты в Ваш аккаунт в Stripо можно только лишь подгружая ссылку на выбранный шрифт. Например, сайт Adobe Fonts https://fonts.adobe.com/collections предлагает именно ссылки к шрифтам и их описание ( "font-family", обычный это шрифт или курсив) для введения информации в соответствующие поля. Ссылку для встраивания, которую предоставит Adobe Fonts, вам нужно привести к формату, который обозначен в статье или поле для введения: начинаться она должна с https; никаких кавычек до и после ссылки. Делайте, пожалуйста, все по аналогии со шрифтами Google Fonts, как показано в видео. https://www.youtube.com/watch?v=U2X3CLN01zA Проверено — шрифты Adobe подгружаются и работают :) Если же Вам понадобится более подробная инструкция со скриншотами, — пожалуйста, пишите нам на contact@stripo.email. Будем рады помочь.

Евгения Землянская commenté à Hanna Kuznietsova il y a 2 ans

а если есть только файл со шрифтом? Его никак не загрузить?

Hanna Kuznietsova commenté à Евгения Землянская il y a 2 ans

Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.

Vous pourriez être intéressé par

précédent suivant
banner9
06 juin · 15 min lu
10 meilleurs concepteurs de modèles de courriel pour 2022

Est-ce que tous les constructeurs de modèles de courriel se ressemblent ? Vous êtes maintenant confus sur lequel choisir pour vos campagnes de courriel, n'est-ce pas? Ce n'est pas étonnant, car il en existe un très grand nombre. Nous allons passer en revue les constructeurs les plus populaires pour trouver leurs caractéristiques distinctives afin de vous aider à trouver le meilleur constructeur de courriel HTML pour vos besoins actuels. Je tenterai de créer un modèle dans tous ces éditeurs avec...

Création Marketing Modèles
24 mai · 18 min lu
Les meilleures polices de caractères pour les e-mails : Conseils et astuces d'utilisation

L'une des préoccupations les plus marquantes dans le processus de production d'un courriel est le choix de la bonne police. Poids, hauteur, largeur, couleur, forme, espacement... Tout a-t-il de l'importance ? Oui, mais l'une des choses les plus importantes est de choisir une police qui soit lisible. Dans ce post, nous allons vous montrer comment choisir la meilleure police professionnelle pour les emails. Concevez des e-mails élégants avec Stripo en un rien de temps grâce à nos modèles préétablis Parcourir...

Création Modèles
Greatest Examples of GIF animations in Emails_Cover Image
27 octobre 2021 · 10 min lu
16 superbes exemples de GIFs animés dans des courriels

Les GIFs dans les courriels vous seront d'une grande utilité si vous souhaitez mettre en valeur votre produit, attirez l'attention des utilisateurs sur certains éléments, ou simplement décorer légèrement votre texte. Dans cet article, nous avons fourni quelques meilleurs exemples d'animation de gif pour courrier électronique. Exemples de GIFs animés dans les courriers électroniques Voici une compilation des meilleurs exemples avec des GIFs dans les courriers électroniques. Chaque GIF remplit sa mission. 1. Adidas (Source : courriel d'Adidas) Adidas a...

Création Marketing
08 avril 2021 · 17 min lu
14 meilleurs exemples de conception de signatures de courriel

Les bonnes signatures d'e-mails nous aident à développer notre activité et à faire bonne impression sur les clients. Comme il s'agit du dernier élément que les gens voient dans les courriels, nous devons rendre nos signatures personnelles créatives et mémorables. Examinons les meilleurs exemples de signatures d'e-mails et leur utilisation appropriée dans les e-mails et les modèles de newsletter pour les e-mails. Il convient de mentionner que tous les types d'entreprises ont besoin de signatures de courriel professionnelles avec des...

Création Marketing Modèles
Soyez toujours au fait des dernières actualités de l'e-marketing, des guides, des articles et des guides pratiques sur la conception d'e-mails