Eigene Schriften in Türchen.com verwenden

Eigene Schriften im Adventskalender nutzen

Im Bereich Branding sind Schriften oft genauso wichtig wie Logos oder Farben. Sie prägen den visuellen Auftritt einer Marke und sorgen für Wiedererkennung.

Eine eigene Schrift sorgt dafür, dass dein Markenauftritt konsistent bleibt – auch in einem Adventskalender. Hier sind die wichtigsten Vorteile:

  • Wiedererkennungswert: Eine markante Hausschrift ist ein starkes Erkennungsmerkmal.

  • Markenidentität: Deine Schrift transportiert den Stil und Charakter deiner Marke.

  • Professioneller Look: Ein Kalender, der deine Hausschrift nutzt, wirkt hochwertig und durchdacht.

Genau aus diesem Grund solltest du auch in deinem Türchen-Adventskalender auf dieses zentrale Markenmerkmal nicht verzichten. Mit dem Whitelabel-Feature kannst du ganz einfach deine eigenen Schriften einbinden.

Wie das funktioniert und welche Vorteile es bietet, erfährst du in diesem Blogartikel.

Vorraussetzungen für das Nutzen eigener Fonts

Für deinen Türchen-Kalender bieten wir ab dem Business-Paket schon standardmäßig über 1000 Google Fonts an, die du einfach per Klick auswählen kannst. Der folgende Leitfaden bezieht sich auf besondere Schriften, die nicht enthalten sind.

  • Stelle bitte sicher, dass du die erforderlichen Lizenzen für die Nutzung der Schriftarten besitzt.

  • Für die Nutzung eigener Fonts in Türchen benötigst du das Feature "White-Label": Dieses ist in den Paketen "Premium" und "Enterprise" bereits beinhaltet. Oder du kannst das "White-Label"-Feature einzeln dazu buchen. Dieses findest du im Editor bei den Erweiterungen

  • Ist das "White-Label"-Feature aktiv, findest du im Editor den dazugehörigen Menüpunkt.

Schritt-für-Schritt zur eigenen Schriftart

Schritt 1: Fonts hochladen

Um deine eigenen Schriften in den Kalender einzubinden, müssen sie zuerst hochgeladen werden. Hier ist die genaue Vorgehensweise:

  • Gehe im Menü „Mein Kalender“ auf „Dateien“.

  • Font-Dateien hochladen: Lade die benötigten Schriftdateien im .woff oder .woff2 Format hoch.
  • Hinweis: Falls du nur .ttf oder .otf Dateien hast, kannst du diese mit einem Online-Konverter-Tool ins passende Format umwandeln.

 

  • Font-URL kopieren: Im Dateibrowser findest du bei jeder hochgeladenen Schrift einen Augen-Button. Wenn du darauf klickst, wird die Font-URL angezeigt. Kopiere diese URL für die nächsten Schritte.

Schritt 2: Fonts im Kalender laden

Um die hochgeladenen Schriftarten im Kalender zu nutzen, folge diesen Schritten:

  • Gehe zu „White Label“: Klicke unter „CSS“ auf den Bearbeiten-Button.

 

  • Font-Imports bearbeiten: Wähle den Reiter„Font-Imports“ (direkt unter der Überschrift). Hier findest du bereits ein Beispiel für den Import von Schriftarten.

    • Entferne die Kommentarzeilen /* […] */.

    • Ersetze die Beispiel-URL mit der Font-URL, die du im vorherigen Schritt kopiert hast.

    • Gib der Schriftart einen eindeutigen Namen.

 

  • Berücksichtigung von Weights und Styles: Da Schriften unterschiedlich aufgebaut sein können und Kalender verschiedene Kombinationen von Weight (z.B. Light, Bold) und Style (z.B. Normal, Italic) benötigen, gibt es kein Standardrezept.

 

 

Beispiel – eine Fließtext-Schrift in Bold und Normal und eine besondere Schrift für die Türchen:

@font-face {
  font-family: "CorporateFont";
  font-style: normal;
  font-weight: 400;
  src: url("https://core.tuerchen.com/calendar/BeispielKalenderKey/corporatefont-regular-ee1f7a.woff2");
}

@font-face {
  font-family: "CorporateFont";
  font-style: normal;
  font-weight: 700;
  src: url("https://core.tuerchen.com/calendar/BeispielKalenderKey/corporatefont-bold-ee1f7a.woff2");
}

@font-face {
  font-family: "ChristmasFont";
  font-style: normal;
  font-weight: 400;
  src: url("https://core.tuerchen.com/calendar/BeispielKalenderKey/christmasfont-regular-ee1f7a.woff2");
}

Schritt 3: Fonts im Kalender verwenden

Um die eingebundenen Schriften anzuwenden:

  • Gehe zum „Styling“-Bereich: Im gleichen CSS-Popup wie zuvor findest du unter der Überschrift „Styling“ den Abschnitt, in dem du die Schriften einbinden kannst.

  • Kommentarzeilen entfernen: Entferne hier erneut die Kommentarzeilen /* […] */.

  • Schriftnamen eintragen: Trage den Namen der Schrift ein, den du in Schritt 2 vergeben hast. Nun sollte die Schriftart im gesamten Kalender angezeigt werden.

  • Hinweis: Dadurch wurden die drei im Standard-Design einstellbaren Schriftarten überschrieben. Für die Headlines wird standardmäßig der Bold-Schriftschnitt verwendet.

:root, :host {
  --font-body: "CorporateFont";
  --font-headline: "CorporateFont";
  --font-door: "ChristmasFont";
}

  • Das sieht dann zum Beispiel so aus:

Schritt 4: Feinjustierung

Für eine noch präzisere Anpassung der Schriftarten kannst du im gleichen „Styling“-Feld weitere Feinjustierungen vornehmen. Beispielsweise kannst du bestimmte Schriftgewichte oder Stile nur für bestimmte Bereiche anwenden.

CSS-Kenntnisse erforderlich: Um differenzierte Anpassungen vorzunehmen, sind grundlegende Kenntnisse in CSS erforderlich. Du kannst hier Schriftgrößen, Abstände und andere visuelle Details weiter anpassen.

 

Wir weisen nochmals darauf hin, dass du im Kalender nur Schriften verwenden darfst, für die du auch die Rechte hast.

Noch Fragen?

Dann schau gerne in unseren Hilfe-Bereich oder lass dir Türchen in unserem YouTube-Kanal erklären.

Zurück

Jetzt ausprobieren