Actuellement, la prise en charge des polices personnalisées par les clients de messagerie se limite à Apple Mail sur iOS/macOS : gardez-le à l’esprit et concevez vos emails en traitant les polices personnalisées comme une « amélioration progressive ».
Tutoriel vidéo : intégrer des polices web personnalisées aux emails HTML exportés depuis Figma
Cette vidéo montre comment intégrer des polices web personnalisées (avec des polices de repli compatibles web) aux emails HTML exportés depuis Figma avec le plugin Figma Emailify.
Intégrer des polices web personnalisées par URL
Si vous utilisez des polices personnalisées, vous devez ajouter un lien direct vers l’URL du fichier de police .woff ou .woff2, en cliquant sur le bouton Configure Fonts dans le panneau Preview du plugin.
Vous pouvez y coller un lien vers chacune des polices personnalisées utilisées dans vos designs d’email (par exemple https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), qui sera ensuite inclus sous forme de règles CSS @font-face dans votre HTML exporté.
Veillez à pointer directement vers le fichier de police web .woff ou .woff2. Si vous n’avez qu’un lien vers une intégration CSS, ouvrez-le dans votre navigateur : vous devriez y trouver un lien url vers le fichier de police (par exemple https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), que vous pouvez copier-coller dans le plugin.
Les intégrations de polices personnalisées ne sont prises en charge que dans Apple Mail sur iOS/macOS. Actuellement, la prise en charge des polices personnalisées par les clients de messagerie se limite à Apple Mail sur iOS/macOS : gardez-le à l’esprit et concevez vos emails en traitant les polices personnalisées comme une « amélioration progressive ».
Définir et prévisualiser des polices de repli compatibles web
Si vous utilisez des polices personnalisées dans vos emails, vous pouvez définir pour chacune une police de repli compatible web, qui s’affichera à sa place si l’email HTML est consulté dans un client de messagerie qui ne prend pas en charge les polices personnalisées.
Vous pouvez aussi définir des polices de repli pour les polices Google et les polices personnalisées dans ce même panneau de réglages Configure Fonts.
Si vous avez défini des polices de repli compatibles web pour les polices web personnalisées de votre email, vous pouvez prévisualiser leur rendu en activant l’interrupteur Show Fallback Fonts en bas de la fenêtre d’aperçu d’Emailify.
Liste des polices de repli compatibles web
Voici les différentes polices compatibles web que vous pouvez définir pour les polices web personnalisées utilisées dans vos designs d’email Figma. Comme les intégrations de polices personnalisées ne sont prises en charge que dans Apple Mail sur iOS/macOS, les polices de repli ci-dessous déterminent la police affichée dans tous les autres clients de messagerie (par exemple Outlook, Gmail, etc.), qui ne prennent malheureusement pas en charge les polices personnalisées.
Polices de repli compatibles web sans empattement (Sans-Serif)
- Arial
- Arial Black
- Tahoma
- Trebuchet MS
- Verdana
Polices de repli compatibles web avec empattement (Serif)
- Georgia
- Times New Roman
Polices de repli compatibles web à chasse fixe (Monospace)
- Courier New
Utiliser des polices Google dans vos emails
Emailify inclut automatiquement le code @import des polices Google dans vos exports HTML pour tous les calques Figma qui utilisent une police de la bibliothèque Google Fonts incluse par défaut dans Figma.
Notez que les polices Google ne s’affichent que dans les clients de messagerie qui prennent en charge @font-face dans les emails ; pour les clients qui ne prennent pas en charge les polices personnalisées, une police de repli compatible web (par exemple « Arial », « Georgia » ou « Courier ») est automatiquement chargée à la place.
Les polices Google ne sont prises en charge que dans Apple Mail sur iOS/macOS. Actuellement, la prise en charge des polices personnalisées par les clients de messagerie se limite à Apple Mail sur iOS/macOS : gardez-le à l’esprit et concevez vos emails en traitant les polices personnalisées comme une « amélioration progressive ».
Utiliser des polices personnalisées dans vos images. Si une police personnalisée doit avoir le même rendu dans tous les clients de messagerie, il peut être utile de placer vos calques de texte dans un frame « Image ». Ce texte est alors exporté dans l’image elle-même et ne dépend plus de la prise en charge des polices web personnalisées pour s’afficher correctement.