---
url: "/de/emailify/design/fonts.md"
description: "Eigene Webfonts werden nur in Apple Mail unter iOS/MacOS unterstützt. Bette sie dafür ein und lege websichere Ersatzschriften für alle anderen E-Mail-Clients fest."
---

# Webfonts und websichere Ersatzschriften in E-Mails verwenden

> Eigene Webfonts werden nur in Apple Mail unter iOS/MacOS unterstützt. Bette sie dafür ein und lege websichere Ersatzschriften für alle anderen E-Mail-Clients fest.

> **Warning:** Derzeit ist die [Unterstützung für eigene Schriften in E-Mail-Clients](https://www.caniemail.com/features/css-at-font-face/) 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.
[Embedded media](https://www.youtube-nocookie.com/embed/dtTNDXeO3FA)

## URLs eigener Webfonts einbetten {#adding-custom-web-font-url-embeds}

[Video](/assets/videos/emailify/design/applying-web-fonts.mp4)

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.

> **Note:** 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.

> **Warning:** **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](https://www.caniemail.com/features/css-at-font-face/) 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 {#setting-and-previewing-web-safe-fallback-fonts}

[Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4)

Verwendest du eigene Schriften in deinen E-Mails, kannst du für jede davon eine [websichere Ersatzschrift](#list-of-web-safe-fallback-fonts) festlegen. Sie wird angezeigt, wenn die HTML-E-Mail in einem [E-Mail-Client ohne Unterstützung für eigene Schriften](https://www.caniemail.com/features/css-at-font-face/) 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](#list-of-web-safe-fallback-fonts) festgelegt, kannst du dir ansehen, wie sie aussehen: Schalte dazu unten im Vorschaufenster von Emailify den Schalter **Show Fallback Fonts** ein.

### Liste websicherer Ersatzschriften {#list-of-web-safe-fallback-fonts}

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 {#using-google-fonts-in-your-emails}

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](https://fonts.google.com/) verwenden, die Figma standardmäßig mitbringt.

Beachte, dass Google Fonts nur in [E-Mail-Clients sichtbar sind, die @font-face](https://www.caniemail.com/features/css-at-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](#list-of-web-safe-fallback-fonts) (zum Beispiel „Arial“, „Georgia“ oder „Courier“) geladen.

> **Warning:** **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](https://www.caniemail.com/features/css-at-font-face/) 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“.

> **Tip:** **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.