Eigene Schriften in Türchen.com verwenden
Gerade wenn es um das Thema Branding geht, kommt man nicht um die eigene Hausschrift herum. Denkt man an Marken wie Mercedes, dann ist alleine die gewählte Font bereits ein Erkennungszeichen. Und natürlich musst du auf dieses Markenmerkmal in einem Türchen.com Kalender nicht verzichten!
Aber wie geht das genau? Dafür haben wir hier eine Schritt-für-Schritt Anleitung zusammengestellt.
Für deinen Türchen-Kalender bieten wir ab dem Design-Paket, das in der Business Version enthalten ist, 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.
Voraussetzungen
Um eigene Schriften einsetzen zu können, benötigst du entweder Türchen Business mit dem Feature “White-Label” oder Türchen Premium. In letzterem ist das Feature bereits enthalten. Das White-Label Add-on findest du bei den Erweiterungen:
Ist dieses Feature aktiv, findest du im Editor den dazugehörigen Menüpunkt:
Die Schriftarten einbinden
Für die Einbindung von Schriftarten gibt es zwei unterschiedliche Ansätze, je nachdem, wie die Schrift zur Verfügung steht. Wird sie über einen Dienst, z.B. Google Fonts oder Adobe Typekit eingebunden, dann musst du diese über ein eigenes Script einbinden. Liegt dir eine .woff und .woff2 Datei vor (es braucht beide, damit das auf allen Browsern klappt), dann funktioniert die Einbindung via CSS.
Über eigene Scripte einbinden
Den Code zum Laden der Schriftarten bekommst du normalerweise vom Dienstleister. Im Beispiel benutzen wir eine Schrift von Google Fonts.
Im Bereich “White-Label” findest du einen Reiter “eigene Scripte”. Dort kannst du mit Klick auf “+ hinzufügen” einen neuen Eintrag hinzufügen. In der folgenden Eingabemaske kannst du alles Benötigte angeben. Die Daten hier werden auch verwendet, um einen Cookie-Banner zu erstellen, der für das Verwenden von externen Fonts nötig ist.
Denke also beim Schreiben der Texte “Titel” und “Beschreibung” daran, dass diese von deinen Nutzer:innen des Kalenders gelesen werden. Der Haken bei “Kann nicht abgewählt werden” trägt das Script im Cookie-Banner im Bereich “Benötigte Cookies” ein.
Mit einem Klick auf “OK” kann die Schriftart geladen und im Kalender verwendet werden. Wie das geht, erklären wir im Abschnitt “Die Schrift verwenden”.
Über CSS laden
Kann die Schriftart über CSS geladen werden, kann in der Regel auf ein Cookie-Banner verzichtet werden. Wird die benötigte Schriftdatei bereits auf der Homepage deines Unternehmens verwendet, kannst du diese direkt einbinden. Ist das nicht der Fall, musst du die Dateien über deine Website zur Verfügung stellen. Es werden die beiden Schriftdatei-Typen .woff und .woff2 benötigt, um die Schriften auf allen modernen Browsern zur Verfügung zu stellen.
Die Links zu den beiden Typen sehen dann z.B. so aus:
https://tuerchen.com/dist/fonts/roboto-light.woff
https://tuerchen.com/dist/fonts/roboto-light.woff2Um die Schrift einzubinden, musst du bei “CSS” die folgende Regel eingeben:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local(''),
url('https://tuerchen.com/dist/fonts/roboto-light.woff2') format('woff2'),
url('https://tuerchen.com/dist/fonts/roboto-light.woff') format('woff');
}Es können auch mehrere Schriften eingebunden werden. Dann ändert sich auch der Bereich “font-family” oder “font-style” bzw. “font-weight”.
Die Schrift verwenden
In Türchen gibt es normalerweise drei Bereiche, in welchen unterschiedliche Fonts verwendet werden können:
- Standard-Schrift (‘
font-body’), wird für die Texte innerhalb der Türchen und die Zeile unter der Headline verwendet - Überschriften (‘
font-headline’) - Türchen-Zahlen (‘
font-door’)
Diese kannst du einfach mit einer CSS-Regel überschreiben. Dazu gibst du folgendes in den CSS-Editor (wenn verwendet, unterhalb der @font-face Regel) ein:
.calendar-content{
--font-body: 'Roboto', sans-serif;
--font-headline: 'Roboto', sans-serif;
--font-door: 'Roboto', sans-serif;
}Damit wird die gewählte Schrift, hier im Beispiel die Schrift "Roboto", für alle drei Bereiche verwendet. Natürlich kann jeder Bereich eine eigene Schriftart haben. Wer es noch genauer haben möchte, kann per CSS-Selektor jeden Bereich des Kalenders nach eigenen Wünschen stylen.
Tipp: Per CSS können auch Farben und Größen sehr genau ausgewählt und verändert werden.
Wenn noch etwas unklar ist, dann schreib uns gerne eine E-Mail. Am besten nutzt du dafür unser Support-Formular.
Wir weisen darauf hin, dass du nur Schriften im Kalender verwenden darfst, für welche du auch die Rechte hast.