Benutzerdefinierte Schriftarten

Standardmäßig enthält der Editor eine Reihe gängiger websicherer Schriftarten (Arial, Georgia, Verdana usw.) in der Schriftauswahl. Sie können diese Liste mit Ihren eigenen Schriftarten erweitern — beispielsweise durch das Laden benutzerdefinierter Schriftarten von Google Fonts oder Ihrem eigenen CDN. Wenn eine benutzerdefinierte Schriftart verwendet wird, wird sie automatisch als <mj-font>-Deklaration in der gerenderten MJML-Ausgabe aufgenommen.

Konfigurieren Sie, welche Schriftarten verfügbar sind, über die Option fonts:

import type { FontsConfig } from '@templatical/types';

const fonts: FontsConfig = {
  defaultFont: 'Inter',
  defaultFallback: 'Arial, sans-serif',
  customFonts: [
    {
      name: 'Inter',
      url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
      fallback: 'Helvetica, Arial, sans-serif',
    },
    {
      name: 'Merriweather',
      url: 'https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap',
      fallback: 'Georgia, serif',
    },
  ],
};

const editor = await init({
  container: '#editor',
  fonts,
});

FontsConfig

Eigenschaft	Typ	Beschreibung
defaultFont	string	Schriftartname, der in neuen Templates standardmäßig ausgewählt ist
defaultFallback	string	Fallback-Stack, der verwendet wird, wenn eine benutzerdefinierte Schriftart nicht verfügbar ist
customFonts	CustomFont[]	Liste benutzerdefinierter Schriftarten, die registriert werden sollen
builtIns	boolean | string[]	Schränkt ein, welche integrierten Schriftarten in der Auswahl erscheinen (siehe unten)

CustomFont

Eigenschaft	Typ	Beschreibung
name	string	Anzeigename in der Schriftauswahl
url	string	URL zum Schriftart-CSS (z. B. Google-Fonts-Link)
fallback	string	Optionaler Fallback-Font-Stack für diese Schriftart

Benutzerdefinierte Schriftarten werden automatisch als <mj-font>-Deklarationen in der gerenderten MJML-Ausgabe eingefügt.

Integrierte Schriftarten einschränken

Standardmäßig bietet die Auswahl alle sieben integrierten websicheren Schriftarten (Arial, Helvetica, Georgia, Times New Roman, Verdana, Trebuchet MS, Courier New) zusammen mit Ihren customFonts an. Verwenden Sie builtIns, um diese Liste einzugrenzen — nützlich, wenn Sie den Editor als White-Label- / Brand-Kit-Werkzeug einbetten und möchten, dass Autoren bei genehmigten Schriftarten bleiben.

const fonts: FontsConfig = {
  // Nur diese integrierten Schriftarten behalten, plus alle customFonts:
  builtIns: ['Georgia', 'Arial'],
  // Oder die integrierten Schriftarten ganz weglassen und nur eigene anbieten:
  // builtIns: false,
  customFonts: [
    /* ... */
  ],
};

• true oder weggelassen — alle sieben integrierten Schriftarten werden angeboten (Standard).
• false — keine integrierten Schriftarten; die Auswahl listet nur Ihre customFonts.
• string[] — eine Zulassungsliste der zu behaltenden integrierten Schriftartnamen, ohne Beachtung der Groß-/Kleinschreibung abgeglichen. Ein Name, der keine integrierte Schriftart ist, wird mit einer Warnung protokolliert und übersprungen.

Das Einschränken der Liste betrifft nur die Auswahl. Eine benutzerdefinierte Schriftart kann weiterhin die defaultFont sein, wenn alle integrierten Schriftarten ausgeschlossen sind, und Inhalte, die bereits eine ausgeblendete integrierte Schriftart verwenden, werden weiterhin mit ihrem korrekten Fallback-Stack gerendert.

Wenn Sie die Schriftart ausschließen, mit der neue Templates beginnen — standardmäßig Arial oder die als defaultFont festgelegte —, protokolliert der Editor beim Start eine Entwicklungswarnung, da Autoren sonst auf einer Schriftart landen, die die Auswahl nicht erneut anbieten kann. Behalten Sie diese Schriftart entweder in builtIns oder setzen Sie defaultFont auf eine angebotene Schriftart.

Best Practices

• Immer einen Fallback festlegen — Die meisten E-Mail-Clients unterstützen keine benutzerdefinierten Schriftarten. Der Fallback-Stack stellt sicher, dass Ihre E-Mail auch dann gut aussieht, wenn die benutzerdefinierte Schriftart nicht geladen wird.
• Schriftgewichte begrenzen — Fügen Sie nur die Gewichte ein, die Sie tatsächlich benötigen (z. B. wght@400;700). Zusätzliche Gewichte erhöhen die Ladezeit für die Empfänger.
• Bei 1-2 benutzerdefinierten Schriftarten bleiben — Zu viele Schriftarten verlangsamen das Rendering und machen das Design inkonsistent. Eine für Überschriften und eine für Fließtext ist ein gängiges Muster.
• Über Clients hinweg testen — Gmail, Outlook und Apple Mail behandeln Schriftarten alle unterschiedlich. Gmail unterstützt Google Fonts in den meisten Fällen, aber Outlook fällt auf Systemschriftarten zurück.