Derzeit ist die Unterstützung für eigene Schriften in E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Behalte das im Hinterkopf und gestalte deine E-Mails mit eigenen Schriften nach dem Prinzip der „progressiven Verbesserung“.
Video-Tutorial: Eigene Webfonts in HTML-E-Mail-Exporte aus Figma einbetten
Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify eigene Webfonts (mit websicheren Ersatzschriften) in HTML-E-Mail-Exporte aus Figma einbettest.
URLs eigener Webfonts einbetten
Wenn du eigene Schriften verwendest, musst du einen direkten Link zur URL der .woff- oder .woff2-Schriftdatei hinzufügen. Klick dazu im Preview-Panel des Plugins auf den Button Configure Fonts.
Dort fügst du für jede eigene Schrift in deinen E-Mail-Designs einen Link ein (zum Beispiel https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff). Die Links werden dann als @font-face-CSS-Regeln in dein exportiertes HTML übernommen.
Achte darauf, direkt auf die Webfont-Datei im Format .woff oder .woff2 zu verlinken. Hast du nur einen Link zu einem CSS-Embed, öffne ihn in deinem Browser. Darin findest du einen url-Link zur Schriftdatei (zum Beispiel https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), den du kopieren und ins Plugin einfügen kannst.
Eingebettete eigene Schriften werden nur in Apple Mail unter iOS/MacOS unterstützt. Derzeit ist die Unterstützung für eigene Schriften in E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Behalte das im Hinterkopf und gestalte deine E-Mails mit eigenen Schriften nach dem Prinzip der „progressiven Verbesserung“.
Websichere Ersatzschriften festlegen und in der Vorschau ansehen
Verwendest du eigene Schriften in deinen E-Mails, kannst du für jede davon eine websichere Ersatzschrift festlegen. Sie wird angezeigt, wenn die HTML-E-Mail in einem E-Mail-Client ohne Unterstützung für eigene Schriften geöffnet wird.
Im selben Einstellungs-Panel Configure Fonts kannst du auch Ersatzschriften für Google Fonts und eigene Schriften festlegen.
Hast du für eigene Webfonts in deiner E-Mail websichere Ersatzschriften festgelegt, kannst du dir ansehen, wie sie aussehen: Schalte dazu unten im Vorschaufenster von Emailify den Schalter Show Fallback Fonts ein.
Liste websicherer Ersatzschriften
Unten findest du die websicheren Schriften, die du für eigene Webfonts in deinen E-Mail-Designs in Figma festlegen kannst. Da eingebettete eigene Schriften nur in Apple Mail unter iOS/MacOS unterstützt werden, bestimmen diese Ersatzschriften, welche Schrift in allen anderen E-Mail-Clients angezeigt wird (zum Beispiel Outlook, Gmail usw.), die leider keine eigenen Schriften unterstützen.
Websichere Ersatzschriften (Sans-Serif)
- Arial
- Arial Black
- Tahoma
- Trebuchet MS
- Verdana
Websichere Ersatzschriften (Serif)
- Georgia
- Times New Roman
Websichere Ersatzschriften (Monospace)
- Courier New
Google Fonts in E-Mails verwenden
Emailify fügt deinen HTML-Exporten automatisch den @import-Code für Google Fonts hinzu – für alle Figma-Ebenen, die eine Schrift aus der Google-Fonts-Bibliothek verwenden, die Figma standardmäßig mitbringt.
Beachte, dass Google Fonts nur in E-Mail-Clients sichtbar sind, die @font-face in E-Mails unterstützen. In allen E-Mail-Clients ohne Unterstützung für eigene Schriften wird stattdessen automatisch eine websichere Ersatzschrift (zum Beispiel „Arial“, „Georgia“ oder „Courier“) geladen.
Google Fonts werden nur in Apple Mail unter iOS/MacOS unterstützt. Derzeit ist die Unterstützung für eigene Schriften in E-Mail-Clients auf Apple Mail unter iOS/MacOS beschränkt. Behalte das im Hinterkopf und gestalte deine E-Mails mit eigenen Schriften nach dem Prinzip der „progressiven Verbesserung“.
Eigene Schriften in Bildern verwenden. Muss eine eigene Schrift in allen E-Mail-Clients einheitlich aussehen, kann es sich lohnen, deine Textebenen in einen „Image“-Frame zu legen. Der Text wird dann als Teil des Bildes exportiert und ist für die korrekte Darstellung nicht auf die Unterstützung eigener Webfonts angewiesen.