Wie kann ich eine eigene Schriftart verwenden?

Standardmäßig kannst du auf deiner Spreadmind Plattform bereits aus einem Pool an Google Fonts Schriftarten zurückgreifen, welche direkt über die online Bibliothek von Google geladen werden. 

Du hast aber auch die Möglichkeit, deine eigene Schriftart auf deiner Spreadmind Plattform zu verwenden. Diese Schriftart wird dir dann lokal (und DSGVO konform) von unserem Spreadmind Server zur Verfügung gestellt:

1. Welches Dateiformat wird für die Schrift benötigt?

• OTF = OpenType Font
• TTF = TrueType Font

Das wohl am meisten verwendete Dateiformat ist TTF und wird vor allem von den gängigen Browsern Chrome, Firefox, Safari und Opera unterstützt. 

Divi erlaubt es dir, für eine Schriftfamillie auch beide Formate hochzuladen. Mit Hilfe eines Online Konvertors kannst du kostenlos die Schriftdatei in dein gewünschtes Dateiformat konvertieren. Wir nutzen dafür bspw. cloudconvert.com.

2. Wie kann ich die eigene Schrift hochladen?

Logge dich dazu als Admin auf deiner Spreadmind Plattform ein. Wie das geht, zeigt dir diese Anleitung. Rufe dann am besten im Frontend eine Seite auf, bspw. deine Startseite und aktiviere den visuellen Builder von Divi.

Grundsätzlich gilt: 

Du kannst auf jeder Seite in den Einstellungen irgendeines Moduls deine eigene Schriftart hochladen. Das musst du nur einmalig umsetzen. Danach kannst du auf jeder Seite deiner Plattform diese Schriftart verwenden oder sogar global als Schriftart definieren.

Wir zeigen dir den Upload einer eigenen Schriftart am Beispiel eines Text-Moduls auf der Startseite unserer Test-Plattform. Öffne dazu die Modul-Einstellungen und gehe über den Reiter "Design" zur Option "Text" > Text Schriftart:

Über das DropDown-Menü für die Schriftart findest du den Button Hochladen:

Klickst du auf diesen Button, erscheint ein weiteres Popup, über welches du deine Schriftart von deinem Computer auswählen kannst:

1. In dem ersten Feld kannst du der Schriftart einen eigenen Titel verwenden. Unter diesem ist dann deine Schriftart bei allen Design-Einstellungen zu finden, du solltest daher einen sinnvollen Titel vergeben.
2. Über den Button "Datei auswählen" wählst du deine eigene Schriftart lokal von deinem Computer aus.
3. Über den Button "Hochladen" wird der Upload der Schriftart gestartet.

In unserem Beispiel wollen wir die Schriftart Broadcast Matter für unsere Überschriften verwenden und wählen als eindeutigen Namen der Schrift Custom Broadcast Matter:

Über den Button "Hochladen" wird der Upload der Schriftart gestartet und somit lokal auf unseren Spreadmind Server hochgeladen. Ist der Upload abgeschlossen, steht dir die Schriftart in Zukunft bei jedem Modul, bei welchem du eine Schriftart anpassen kannst, im DropDown gleich an erster Stelle zur Verfügung:

Für unsere restlichen Fließtext verwenden wir die Schriftart DINPro Regular und wählen daher als eindeutigen Namen der Schrift Custom DINPro Regular: 

Auch hier starten wir den Upload über den Button "Hochalden". Ist der Upload abgeschlossen, steht dir die Schriftart in Zukunft bei jedem Modul, bei welchem du eine Schriftart anpassen kannst, im DropDown gleich an zweiter Stelle zur Verfügung:

3. Wie kann ich die eigene Schrift auf meiner Spreadmind Plattform anwenden? 

Da du an vielen verschiedenen Stellen Schriftarten definieren kannst, möchten wir dir hier zeigen, wo überall du nun deine eigene Schrift verwenden und anwenden kannst. Denn standardmäßig kannst du die Schriftart im Theme Customizer global auf die gesamte Plattform anwenden. 

Einzig bei den Social-Media Buttons und den Opt-In Formularen musst du einen CSS-Code verwenden.

3.1 Global auf der gesamten Plattform

Um deine eigene Schriftart auf der gesamten Spreadmind Plattform zu verwenden, kannst du diese im Theme Customizer hinterlegen. 

Theme Customizer über das Backend aufrufen: "Design" > "Theme Customizer":

Theme Customizer über das Frontend aufrufen: "Titel deiner Spreadmind Plattform" > "Theme Customizer":

Gehe nun zu "Allgemeine Einstellungen" > "Typografie" zum Abschnitt Schriftart Kopfzeile und Haupt-Schriftart. Die Schriftart, welche du bei "Schriftart Kopfzeile" hinterlegst, wirkt sich auf alle Titel und Überschriften (Headings H1-H6) aus. Die Schriftart, welche du bei "Haupt-Schriftart" hinterlegst, wirkt sich auf deinen gesamten restlichen Inhalt aus. 

In unserem Beispiel wollen wir für unsere Überschriten die Broadcast Matter verwenden, welche wir zuvor hochgealden haben. Über das Dropdown unter "Schriftart Kopfzeile" können wir unsere eigene Schrift nun auswählen (diese wird gleich zu Beginn angezeigt).

Und für unseren restlichen Text wollen wir die DINPro-Regular verwenden, welche wir ebenfalls zuvor hochgeladen haben. Über das Dropdown unter "Haupt-Schriftart" können wir unsere eigene Schrift nun auswählen (diese wird ebenfalls gleich zu Beginn angezeigt):

Hast du deine Schriftart(en) entsprechend hinterlegt, klickst du oben im Theme Customizer auf den orangenen Button "Veröffentlichen", um die Änderungen zu speichern und kannst inks daneben über das X-Symbol den Theme Customizer beenden. 

Nun verwendet deine gesamte Spreadmind Plattform deine eigene Schriftart, welche dir nun lokal auf dem Spreadmind Server zur Verfügung gestellt wird.

EINZIGE AUSNAHME:

Einzig bei den Social-Media Sharing Buttons und bei den Opt-In Formularen wird die hinterlegte eigene Schriftart nicht automatisch angewandt. Über einen einfachen CSS-Code kannst du die eigene Schriftart nutzen. Mehr dazu unter Punkt 3.3.

3.2 Individuell bei einem Modul

Nachdem du deine eigene Schriftart über den Divi Builder hochgeladen hast, kannst du nun in jedem Modul diese entsprechend auswählen. Öffne dazu einfach die Modul-Einstellungen und gehe unter dem Reiter "Design" zu der Option "Text" oder "Überschriften". Über das Dropdown kannst du deine eigene Schriftart auswählen:

3.3 Individuell über einen CSS-Code

Hast du deine eigene Schriftart im Theme Customizer global eingestellt, wird diese leider nicht automatisch bei den Social-Media Sharing Buttons und auch nicht bei den Opt-In Formularen genutzt. Aus diesem Grund muss über einen CSS-Code die Schriftart entsprechend vergeben werden. 

CSS-Code für Social-Media Sharing Buttons:

Ab dem EXPERT Paket stehen dir die Social-Media Sharing Buttons zur Verfügung, um bpsw. deine Blog-Artikel in anderen sozialen Netzwerken teilen zu können. Kopiere nun den folgenden CSS-Code und füge ihn im Backend deiner Spreadmind Plattform unter "Design" > "Theme Optionen" > Reiter "Allgemein" am Ende der Seite bei "Eigenes CSS" ein:

.shariff .shariff-count, .shariff .shariff-text {
    font-family: "Name deiner Schriftart",Helvetica,Arial,sans-serif !important;
}<br>

Wichtig:

Ersetze nun im Code in der zweiten Zeile Name deiner Schriftart durch den Namen deiner Schriftart, welche du beim Hochladen gewählt hast. Achte bitte auf die exakt gleiche Schreibweise und auch darauf, dass der Name der Schriftart innerhalb der Anführungszeichen gesetzt ist. 

In unserem Beispiel haben wir für den normalen Text die DINPro-Regular unter Custom DINPro Regular hochgeladen. Somit würde der CSS-Code bei uns wie folgt aussehen:

.shariff .shariff-count, .shariff .shariff-text {
    font-family: "Custom DINPro Regular",Helvetica,Arial,sans-serif !important;
}<br>

Die Schriftarten Helvetica, Arial und sans-serif sind sogenannte Fallback-Schriften, die dann angezeigt werden, wenn es Probleme beim Anzeigen der eigenen Schriftart gibt. Diese Fallback-Schriftarten sind keine Google Fonts und werden somit auch nicht über die online Google Fonts Bibliothek geladen. 

CSS-Code für Opt-In Formulare:

Auch für die Opt-In Formulare, welche du im Backend unter "Opt-In Formulare" erstellst, müssen wir die neue eigene Schriftart über einen CSS-Code entsprechend hinterlegen. Kopiere nun den folgenden CSS-Code und füge ihn im Backend deiner Spreadmind Plattform unter "Design" > "Theme Optionen" > Reiter "Allgemein" am Ende der Seite bei "Eigenes CSS" ein:

/* OPTIN TITEL */
.et_bloom .et_bloom_form_header h2 { font-family: "Name deiner Schriftart",Helvetica,Arial,sans-serif !important; }

/* OPTIN NACHRICHT */
.et_bloom .et_bloom_form_header p { font-family: "Name deiner Schriftart",Helvetica,Arial,sans-serif !important; }

/* OPTIN INPUT FELDER, bspw. Email Text */
.et_bloom .et_bloom_form_container input { font-family: "Name deiner Schriftart",Helvetica,Arial,sans-serif !important; }

/* OPTIN BUTTON TEXT */
.et_bloom .et_bloom_form_container form button span { font-family: "Name deiner Schriftart",Helvetica,Arial,sans-serif !important; }

/* FORM FOOTER TEXT */
.et_bloom .et_bloom_form_footer p { font-family: "Name deiner Schriftart",Helvetica,Arial,sans-serif !important; }<br>

Wichtig:

Ersetze nun im Code überall Name deiner Schriftart durch den Namen deiner Schriftart, welche du beim Hochladen gewählt hast. Achte bitte auf die exakt gleiche Schreibweise und auch darauf, dass der Name der Schriftart innerhalb der Anführungszeichen gesetzt ist. 

In unserem Beispiel haben wir für die Titel und Überschriften die Broadcast Matter unter dem Namen Custom Broadcast Matter und für den normalen Text die DINPro-Regular unter Custom DINPro Regular hochgeladen. 

Somit würde der CSS-Code für den Opt-In Formular Titel wie folgt aussehen: 

/* OPTIN TITEL */
.et_bloom .et_bloom_form_header h2 { font-family: "Custom Broadcast Matter",Helvetica,Arial,sans-serif !important; }<br>

Und der CSS-Code für die restlichen Elemente des Opt-Ins so:

/* OPTIN NACHRICHT */
.et_bloom .et_bloom_form_header p { font-family: "Custom DINPro Regular",Helvetica,Arial,sans-serif !important; }

/* OPTIN INPUT FELDER, bspw. Email Text */
.et_bloom .et_bloom_form_container input { font-family: "Custom DINPro Regular",Helvetica,Arial,sans-serif !important; }

/* OPTIN BUTTON TEXT */
.et_bloom .et_bloom_form_container form button span { font-family: "Custom DINPro Regular",Helvetica,Arial,sans-serif !important; }

/* FORM FOOTER TEXT */
.et_bloom .et_bloom_form_footer p { font-family: "Custom DINPro Regular",Helvetica,Arial,sans-serif !important; }<br>

Die Schriftarten Helvetica, Arial und sans-serif sind sogenannte Fallback-Schriften, die dann angezeigt werden, wenn es Probleme beim Anzeigen der eigenen Schriftart gibt. Diese Fallback-Schriftarten sind keine Google Fonts und werden somit auch nicht über die online Google Fonts Bibliothek geladen.