Webfonts vom eigenen Server laden

Nachfolgend beschreiben wir Ihnen Schritt für Schritt, wie Sie Google-Webfonts selbst hosten, um ggf. eine bessere DSGVO-Konformität zu erreichen.


1. Laden Font-Dateien vom Google-Server für Ihr Projekt unterbinden

  1. Klicken Sie auf "Website > Erweitert > Attribute".
  2. Klicken Sie im Fenster unten links auf "Attribute" und wählen Sie die Option "+ Neu".
  3. Geben Sie im Feld Name folgendes ein: webfonts-deactivate
  4. Geben Sie ins größere Feld darunter die Zahl 1 ein: 1
  5. Klicken Sie auf OK.

Hiermit wurde nun eine Einstellung konfiguriert, die allen Zeta Producer Layouts verbietet Schriftarten direkt vom Google-Server zu laden, wenn in den Layout-Einstellungen oder im Editor ein Webfont ausgewählt wurde.

Wenn Sie nun in den Layout-Einstellungen oder im Text-Editor einen Webfont auswählen, müssen Sie sich auch darum kümmern, die entsprechenden Dateien herunterzuladen und, wie unten beschrieben, ins Projekt zu importieren.


2. Font-Dateien downloaden und CSS einbinden

Öffnen Sie Webfont Helper mittels der folgenden URL in Ihrem Webbrowser: https://google-webfonts-helper.herokuapp.com/fonts

  1. Suchen Sie links in der Font liste nach der gewünschten Schriftart. Für dieses Beispiel nehmen wir mal "Open Sans".

  2. Wählen Sie das entsprechende "charset". Normalerweise reicht "latin".

  3. laden Sie die Schriftart möglichst in den Stilen 300, 300italic, regular, italic, 700 und 700italic. So haben Sie dann die größtmögliche Flexibilität in der Formatierung.

  4. Wählen Sie bei Punkt 3 (Copy CSS): "Modern Browsers" um die Anzahl an verschiedenen Font-Dateien möglichst gering zu halten (WOFF und WOFF2).

  5. Wichtig: geben Sie ins Feld "Customize folder prefix(optional)" folgendes ein: fonts/

  6. Kopieren Sie sich das komplette angezeigte CSS in die Zwischenablage (irgendwo in den CSS-Code klicken markiert alles, danach STRG-C zum kopieren.

  7. Klicken Sie bei Punkt 4 (Download files) auf den Download-Button.

  8. Öffnen Sie Ihr Projekt in Zeta Producer.

  9. Klicken Sie auf "Website > Einstellungen" und im sich dann öffnenden Fenster links auf "CSS".

  10. Schreiben Sie in die Erste Zeile im Textfeld folgendes: <style>

  11. Drücken Sie die Zeilenschaltung und fügen Sie dann mit STRG-V den CSS code aus der Zwischenabage ein.

  12. Drücken Sie nun nochmals die Zeilenschaltung (Return) und geben Sie folgendes ein: </style>

  13. Der Feldinhalt sollte nun ungefähr so aussehen:

    <style>
    /* open-sans-300 - latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 300;
      src: url('../fonts/open-sans-v15-latin-300.eot');
      …
    </style>
    
  14. Klicken Sie auf den Button "OK" .

Download-Seite mit CSS-Code für die Schriftart "Open Sans"

Download-Seite mit CSS-Code für die Schriftart "Open Sans"


3. Font-Dateien ins Projekt kopieren

  1. Entpacken Sie die in Schritt 6 heruntergeladene .zip-Datei.
  2. Öffnen Sie Ihr Projekt in Zeta Producer.
  3. Öffnen Sie die Dateiverwaltung über: "Erweitert > Dateien".
  4. Klicken Sie unten links auf das + Icon und legen Sie damit einmalig einen Ordner namens "webfonts" an (um Ordnung zu halten).
  5. Klicken Sie in der Ordner-Liste links auf den Ordner "webfonts".
  6. Klicken Sie oben auf den Button "Importieren".
  7. Wechseln Sie in das Verzeichnis mit den entpackten Dateien aus dem geladenen .zip
  8. Klicken Sie mit der Maus auf die erste Datei in der Liste, halten Sie die Hochstelltaste auf der Tastatur und klicken Sie dann auf die letzte Datei in der Liste. Nun sind alle Dateien markiert.
  9. Klicken in Fenster für die Dateiauswahl auf den Button "Öffnen" um alle gewählten Dateien zu importieren.

Folgendes müssen Sie nun einmalig für jede der importierten Font-Dateien wiederholen.

  1. Machen Sie einen Rechtsklick auf die erste importierte Datei und wählen Sie die Option "Eigenschaften".
  2. Klicken Sie links auf "Ausgabe".
  3. Aktivieren Sie die Option "Datei an einen anderen Speicherort veröffentlichen" und tragen Sie im Textfeld folgendes ein: /fonts
  4. Machen Sie einen Rechtsklick auf die nächste importierte Datei und wählen Sie die Option "Eigenschaften".
  5. Fahren Sie bei Schritt 2 fort.

Nun sollten Sie die Seiten inkl. der neu importierten Dateien erstellen, indem Sie die Funktionstaste F6 drücken.

Wir haben nun die Schriftart "Open Sans" in leicht, leicht kursiv, normal, kursiv, fett und fett kursiv geladen und dürfen daher nun in den Layout-Einstellung in den Feldern zur Schriftauswahl über den Button "Weitere Schriftarten" auch die Schrift gleichen Namens auswählen.

Nur wenn die Schriftarten auch geladen und importiert worden sind, hat die Layout-Einstellung auch entsprechende Auswirkungen. Wählen Sie in den Layout-Einstellungen eine Schriftart, die noch nicht geladen und ins Projekt importiert wurde, wird vom Browser einfach eine Ersatzschrift dargestellt (das merken Sie unter Umständen gar nicht).