• Trust
  • Anfrage einreichen

    • Need assistance with your Emarsys product?
    We'll get you the help you need!

     

    Emarsys client

     

    Emarsys client
    SAP for Me Login

    You can contact our support team via the SAP for Me.

    The Emarsys component: CEC-EMA

    		Login to the Help Portal and Submit your request. 
    1. Emarsys
    2. E-Mail
    3. Email templates

    Fonts:: Schriften hinzufügen
    Aktualisiert

    Aus Compliance-Gründen können Sie nur folgende Schriften verwenden:

    • lizenzierte Schriften oder
    • lokal gehostete, offline eingebettete Schriften

    Wichtig:

    • Das Hochladen der Schriftdateien zur Medien-Datenbank erfolgt auf Ihr eigenes Risiko. Bitte beachten Sie, dass das Hochladen von Inhalten in die Medien-Datenbank auf Ihr eigenes Risiko erfolgt und Sie verifizieren müssen, ob die hochgeladenen Inhalte durch Urheberrechte geschützt sind. Weitere Informationen erhalten Sie unter: Schriften hinzufügen - Häufig gestellte Fragen
    • Einige der Online-Webschriften scheinen zwar zu funktionieren, werden von uns aber nicht unterstützt; Grund dafür sind der Datenschutz bzw. das Risiko, das sich durch den Transfer persönlicher Daten außerhalb des europäischen Wirschaftsraums ergibt.

    Benutzerdefiniertes Font Face zu einer Vorlage hinzufügen

    Hier erfahren Sie, wie Sie eigene Schriften zu Ihrer Vorlage hinzufügen können:

    Voraussetzungen:

    • Sie müssen die Schrift auf Ihrem Server hosten (z.B. auf dem Server, der Ihre Website hostet).
    • Bevor Sie eigene Schriften auf Ihren Server hochladen, prüfen Sie bitte die für die Schrift geltenden Nutzungsbedingungen (z.B. ob es erlaubt ist, die Schrift auf Ihren Server hochzuladen).
    1. Nachdem die Schriften auf Ihren Server hochgeladen wurden, gehen Sie wie folgt vor:

    a. Navigieren Sie zu Content > Blockbasierte Vorlagen.

    b. Führen Sie den Mauscursor über die Vorlage, die Sie aktualisieren wollen, und klicken Sie Bearbeiten.

    c. Öffnen Sie das Tab Style-Editor und fügen Sie die Schriften mittels @font-face-Methode hinzu.

    Generell können Sie für jede Schrift zwei Schriftbreiten (Schriftschnitte/font weights) und, so verfügbar, deren Kursiv-Versionen hinzufügen:

    • font-weight: 400 or normal

    font-style: normal

    • font-weight: 400 or normal

    font-style: italic

    • font-weight: 700 or bold

    font-style: normal

    • font-weight: 700 or bold

    font-style: italic

    Code-Beispiel:

    @font-face { font-family:'Web Font'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font'; font-style:italic; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Italic.woff2) format('woff2'); }  @font-face { font-family:'Web Font'; font-style:italic; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Italic.woff2) format('woff2'); }
    Für Kopieren klicken

    Im oben angeführten Beispiel wird die Schrift mit font-weight: 400/normal im regulären Text und die Schrift mit font-weight: 700/bold im fett formatierten Text angezeigt.

    Sie können folgende Schriftdateienformate verwenden: .woff, .woff2, .otf, .eot, .ttf (.woff und .woff2 sind die am häufigsten unterstützten Schriftformate).

    Je nach Schriftdateiformat müssen Sie den Formatteil des CSS wie folgt ändern:

    • Format der Schriftdatei: .woff - im CSS zu definierendes Format: format('woff')
    • Format der Schriftdatei: .woff2 - im CSS zu definierendes Format: format('woff2')
    • Format der Schriftdatei: .otf - im CSS zu definierendes Format: format('opentype')
    • Format der Schriftdatei: .eot - im CSS zu definierendes Format: format('embedded-opentype')
    • Format der Schriftdatei: .ttf - im CSS zu definierendes Format: format('truetype')

    Wenn mehrere Schriftdateiformate verfügbar sind, können Sie diese wie folgt einbetten:

    @font-face { font-family:'Web Font'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff) format('woff'), url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.otf) format('opentype'); }
    Für Kopieren klicken
    1. Um andere Schriftbreiten als 400/normal und 700/bold einzubetten, ändern Sie die verknüpften Schriftpfade.

    In diesem Fall müssen Sie die Schriften immer noch als font-weight:400 und font-weight:700 einbetten.

    Im folgenden Beispiel haben wir die Schriftbreiten 300 und 800 in den Schriftpfaden implementiert:

    @font-face { font-family:'Web Font'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_300_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font'; font-style:italic; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_300_Font_Style_Italic.woff2) format('woff2'); }  @font-face { font-family:'Web Font'; font-style:italic; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Italic.woff2) format('woff2'); }
    Für Kopieren klicken

    Im oben angeführten Beispiel wird die Schrift mit font-weight:300 angezeigt, wenn es sich um regulären Text handelt, und die Schriftart mit font-weight:800, wenn der Text fett formatiert ist. Bitte beachten Sie, dass die Fallback-Schrift immer mit font-weight:400 / normal und font-weight:700 / bold angezeigt wird.

    1. Um mehr als zwei Schriftbreiten für eine Schrift zu implementieren, erweitern Sie die Schriftnamen.

    Im folgenden Beispiel haben wir die Schriftbreiten 100, 400, 700 und 800 implementiert (um das Beispiel kürzer zu halten, sind die kursiven Versionen in diesem Fall nicht definiert):

    @font-face { font-family:'Web Font - Thin'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_100_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font - Thin'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font - Regular'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font - Regular'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font - Extra Bold'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2'); }  @font-face { font-family:'Web Font - Extra Bold'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Normal.woff2) format('woff2'); }
    Für Kopieren klicken
    1. Überprüfen Sie, ob Ihre Vorlage die Variable ff enthält.

    Die Variable ff ist nicht in allen Vorlagen verfügbar, sondern nur in den von Emarsys erstellten Vorlagen (ab 2018/2019) oder in Vorlagen, die auf unseren Basisvorlagen basieren (z.B. BestRun und Universal Content Layout Template).

    • Wenn die Variable ff nicht verfügbar ist, können Sie die Schriftart mit inline-style innerhalb des Tags oder mit einer CSS-Klasse festlegen:
      • Beispiel 1 - Schrift mit inline-style definieren: <font style="font-family:'Web Font', Arial, Helvetica, sans-serif;">Text</font>
      • Beispiel 2 - Schrift mit einer CSS-Klasse definieren: In diesem Fall müssen Sie die Klasse auch im Style-Editor der Vorlage definieren:.webfont {font-family:'Web Font', Arial, Helvetica, sans-serif;}
        • Legen Sie die Schrift im Block fest, indem Sie die CSS-Klasse im HTML-Tag verwenden: <font class="webfont">Text</font>
    • Wenn die Variable ff verfügbar ist, fügen Sie nach Implementierung der Schriften diese zur Variable ff hinzu, einschließlich eines vollständigen Font Stacks mit Fallback-Schriften.

    Hinweise:

    • Verschiedene Fallback-Schriften (einschließlich ihrer Verteilung auf Windows und macOS) finden Sie hier: https://www.cssfontstack.com/
    • Wir empfehlen, zuerst den Namen der gewünschten Schrift anzugeben, gefolgt von einer Fallback-Schrift für Windows, einer für macOS und der Standardschrift mit oder ohne Serifen (serif oder sans-serif). Das bedeutet, dass jede verfügbare Serifen- oder serifenlose Schrift angezeigt wird, wenn die Webschriften nicht angezeigt werden können (weil nicht unterstützt) oder die definierten Fallback-Schriften nicht verfügbar sind.

    Im folgenden Beispiel sehen Sie, wie Werte für zwei Schriftbreiten implementiert werden:

    Item name: Web Font, Arial, Helvetica, sans-serif

    Item value: 'Web Font', Arial, Helvetica, sans-serif

    Im folgenden Beispiel sehen Sie, wie Werte für mehrere Schriftbreiten implementiert werden (d.h. die Schriftbreiten 100, 400, 700 und 800):

    Item 1

    Item name: Web Font - Thin, Web Font, Arial, Helvetica, sans-serif

    Item value: 'Web Font - Thin', 'Web Font', Arial, Helvetica, sans-serif

    Item 2

    Item name: Web Font - Regular, Web Font, Arial, Helvetica, sans-serif

    Item value: 'Web Font - Regular', 'Web Font', Arial, Helvetica, sans-serif

    Item 3

    Item name: Web Font - Extra Bold, Web Font, Arial, Helvetica, sans-serif

    Item value: 'Web Font - Extra Bold', 'Web Font', Arial, Helvetica, sans-serif

    So sieht die Variable ff in diesem Fall aus:

    1. Nachdem Sie die Schrift im Style-Editor der Vorlage und in der Variable ff implementiert haben, aktualisieren Sie die bestehenden Kampagnen, damit die Schrift angezeigt wird.

    Bei der Verwendung von Webschriften (die über eine Variable implementiert werden) wählen Sie die Schrift in den Block Style Settings und nicht im VCE-Textbearbeitungstool aus. Wenn Sie die Schrift im VCE-Textbearbeitungstool ändern, werden die Änderungen nicht übernommen und Sie müssen den Block möglicherweise zurücksetzen (d. h. Sie müssen ihn neu erstellen).

    Verwenden Sie das VCE-Textbearbeitungstool nicht für das Ändern von Schriften, insbesondere nicht für Webschriften. Wenn Sie das VCE-Textbearbeitungstool zum Einrichten von Schriften verwenden, werden keine Fallback-Schriften definiert, sodass in einigen Fällen eine beliebige Standardschrift angezeigt wird (z.B. Times New Roman oder Arial), wenn die Webschriften nicht angezeigt werden können oder die ausgewählte Schrift nicht verfügbar ist.

    Nachdem Sie die Schrift mit dem VCE-Textbearbeitungstool geändert haben, werden die Einstellungen in den Block Style Settings nicht mehr umgesetzt. Das bedeutet, dass Sie den Block zurücksetzen oder einen neuen Block erstellen müssen.