Google Fonts lokal einbinden — DSGVO-konforme Schriften (dffontmanager)

DF Font Manager hostet Ihre Google Fonts direkt auf Ihrem PrestaShop-Server: Ihre Besucher kontaktieren nie wieder Google-Server (DSGVO-Konformität, abmahnsicher), und Sie ändern die Typografie Ihres Shops über einfache CSS-Regeln — ohne eine einzige Theme-Datei zu verändern. Das Modul übernimmt den Import aus dem Google-Fonts-Katalog, das automatische Subsetting pro Alphabet, das Preloading der kritischen Datei, die font-display-Strategie und den Upload eigener Schriften.

Installation

1. Öffnen Sie in Ihrem PrestaShop-Backoffice Module > Modul-Manager.
2. Klicken Sie auf Modul hochladen und ziehen Sie die Datei dffontmanager.zip hinein.
3. Unter dem Menü Design erscheint ein Tab Schriften-Manager: Dort spielt sich alles ab (der Konfigurieren-Button des Moduls leitet ebenfalls dorthin weiter).

Das Modul registriert drei Hooks (displayHeader, actionFrontControllerSetMedia, actionOutputHTMLBefore) und legt zwei Tabellen an: installierte Schriften und Ersetzungsregeln. Die Schriftdateien liegen in modules/dffontmanager/views/fonts/, das generierte Stylesheet in modules/dffontmanager/views/css/generated/ — stellen Sie sicher, dass diese Ordner beschreibbar sind.

Allgemeine Einstellungen

• Selbst gehostete Schriften aktivieren — Hauptschalter: lädt das generierte Stylesheet und die Preload-Tags im Frontoffice.
• Externe Google-Fonts-Aufrufe entfernen (DSGVO) — bereinigt das gerenderte HTML des Shops: Alle link-Tags auf fonts.googleapis.com oder fonts.gstatic.com (Stylesheets, Preconnects, Preloads) sowie entsprechende Inline-@import-Anweisungen werden vor dem Ausliefern der Seite entfernt. Diese Option garantiert, dass keine Anfrage Google erreicht — selbst wenn Ihr Theme oder ein anderes Modul eine einschleust.
• font-display-Strategie — wird auf jede generierte @font-face-Deklaration angewendet. swap (Standard) hält den Text während des Ladens sichtbar; block, fallback, optional und auto stehen für Spezialfälle bereit.

Eine Google-Schrift importieren

1. Tippen Sie im Panel Google-Schrift importieren mindestens zwei Zeichen: Die Autovervollständigung durchsucht den vollständigen Google-Fonts-Katalog, 7 Tage auf Ihrem Server gecacht (Aktualisieren-Button neben dem Feld).
2. Wählen Sie eine Schriftfamilie: Die verfügbaren Varianten (Schnitte 100 bis 900, normal und kursiv) und Alphabete werden angezeigt. Standardmäßig sind die Schnitte 400 und 700 sowie die Subsets Latin + Latin-Ext vorausgewählt.
3. Klicken Sie auf Lokal importieren.

Das Modul fragt daraufhin die CSS-API von Google ab, lädt die offiziellen woff2-Dateien Ihrer Auswahl herunter (eine Datei pro Alphabet und Variante), prüft deren Binärsignatur, legt sie in views/fonts/familienname/ ab und regeneriert das Stylesheet. Die Seite lädt neu, und die Familie erscheint in der Tabelle der installierten Schriften — inklusive Gesamtgröße auf der Festplatte.

Automatisches Subsetting

Google teilt jede Schrift in Dateien pro Alphabet auf (Latin, Latin-Ext, Kyrillisch, Griechisch, Vietnamesisch usw.). Das Modul lädt nur die angehakten Alphabete herunter und erhält die ursprüngliche unicode-range jeder Datei in der @font-face-Deklaration. Der Browser fordert daher nur die Zeichenbereiche an, die tatsächlich auf der Seite angezeigt werden: Ein typischer deutscher Shop liefert 20 bis 90 KB Schriften statt mehrerer hundert aus.

Eine Familie erneut importieren oder ändern

Um einer bereits installierten Familie einen Schnitt oder ein Alphabet hinzuzufügen, führen Sie den Import einfach mit der neuen Auswahl erneut aus: Die alten Dateien der Familie werden ersetzt, die Ersetzungsregeln bleiben unverändert.

Eine eigene Schrift hochladen

Das Panel Upload einer eigenen Schrift akzeptiert die Formate woff2 (empfohlen), woff, ttf und otf. Geben Sie Familienname, Schnitt und Stil an und senden Sie die Datei — eine Datei pro Schnitt/Stil-Kombination, automatisch unter derselben Familie zusammengeführt. Jede Datei wird per Binärsignatur validiert (nicht per Dateiendung) und exakt wie eine Google-Schrift in das generierte Stylesheet und die Regeln integriert.

Installierte Schriften verwalten

Die Tabelle der installierten Schriften zeigt pro Familie: die Quelle (google oder custom), die Varianten, die Subsets, die Dateianzahl und die Größe auf der Festplatte, dazu zwei Schalter:

• Aktiv — nimmt die Familie in das generierte Stylesheet auf oder schließt sie aus (die Dateien bleiben auf der Festplatte).
• Preload — siehe den eigenen Abschnitt weiter unten.

Der Löschen-Button entfernt die Familie, ihre Dateien auf der Festplatte und alle Regeln, die sie verwenden, und baut das Stylesheet neu auf.

Ersetzungsregeln

Hier wenden Sie Ihre Schriften an, ohne das Theme anzufassen. Jede Regel verknüpft einen CSS-Selektor mit einer installierten Schrift, mit vier Optionen:

• Schnitt — erzwingt ein font-weight (leer lassen, um vom Theme zu erben);
• Stil — normal oder kursiv (leer zum Erben);
• Fallback-Stack — generische Familien, die angezeigt werden, solange die Schrift noch nicht geladen ist: sans-serif, serif, monospace oder system-ui, sans-serif;
• !important — standardmäßig angehakt, garantiert, dass die Regel unabhängig von der Spezifität der Theme-Styles gewinnt.

Gängige Selektor-Beispiele:

• body — der gesamte Shop;
• h1, h2, h3, h4, h5, h6 — alle Überschriften;
• .btn, button — Buttons;
• .product-title, .h3.product-title — Produkttitel in Listings (an Ihr Theme anpassen).

Jedes Hinzufügen oder Löschen einer Regel baut das Stylesheet sofort neu auf. Das Stylesheet lädt nach dem Theme-CSS: Selbst ohne !important gewinnen Ihre Regeln die Kaskade bei gleicher Spezifität.

Preloading — Best Practices

Der Preload-Schalter einer Familie gibt im Kopf der Seite ein link rel=preload as=font crossorigin-Tag für ihre kritische Datei aus, automatisch gewählt: woff2, normaler Stil, Latin-Alphabet, Schnitt am nächsten zu 400. Der Browser lädt die Schrift so parallel zum CSS, noch bevor er ihre Verwendung entdeckt — der endgültige Text erscheint früher.

Technische Funktionsweise

• Das generierte Stylesheet fonts-v{zeitstempel}.css enthält alle @font-face-Deklarationen (mit font-display und unicode-range) gefolgt von den Ersetzungsregeln. Jeder Neuaufbau erzeugt einen neuen Dateinamen (automatisches Cache-Busting) und bereinigt ältere Versionen.
• Es wird über actionFrontControllerSetMedia mit einer Priorität registriert, die es nach dem Theme-CSS platziert.
• Die Preload-Tags gibt displayHeader aus; die Liste der kritischen Dateien wird in der Konfiguration gecacht — keine zusätzliche SQL-Abfrage pro Frontoffice-Seite.
• Die Entfernung externer Aufrufe läuft in actionOutputHTMLBefore, auf dem finalen HTML, nach dem Smarty-Cache.
• Der Button CSS neu aufbauen erzwingt eine vollständige Regenerierung — nützlich nach manuellen Eingriffen an den Dateien oder einer Backup-Wiederherstellung.

DSGVO-Konformität prüfen

1. Öffnen Sie Ihren Shop in einem privaten Browserfenster.
2. Öffnen Sie die Entwicklertools (F12), Tab Netzwerk, und filtern Sie auf fonts.g.
3. Laden Sie die Seite neu: Die Liste muss leer bleiben. Erscheint eine Anfrage an fonts.googleapis.com oder fonts.gstatic.com, aktivieren Sie die Option zur Entfernung externer Aufrufe und leeren Sie den PrestaShop-Cache.

Testen Sie die Startseite, eine Produktseite und den Checkout: Manche Zahlungsmodule oder Drittanbieter-Widgets laden ihre eigenen Schriften in Iframes, außerhalb der Reichweite der HTML-Bereinigung (dort greifen deren eigene Consent-Banner).

Multishop

Importierte Schriften und Ersetzungsregeln werden zwischen allen Shops derselben Installation geteilt. Die Aktivierungsschalter und die Option zur Entfernung externer Aufrufe folgen dem Standard-Konfigurationskontext von PrestaShop.

Fehlerbehebung

• Die Schrift erscheint nicht im Frontend — prüfen Sie der Reihe nach: Der Hauptschalter ist aktiviert, die Familie ist aktiv, eine Ersetzungsregel existiert für den richtigen Selektor, und der PrestaShop-Cache ist geleert (Erweiterte Einstellungen > Leistung). Inspizieren Sie dann das Element im Browser: Erscheint die Regel durchgestrichen, überschreibt sie ein spezifischerer Theme-Style — haken Sie !important an der Regel an.
• Der Import schlägt mit einem Netzwerkfehler fehl — Ihr Server muss fonts.googleapis.com und fonts.gstatic.com ausgehend erreichen können (cURL oder allow_url_fopen). Bei einem Server hinter einer strikten Firewall bitten Sie Ihren Hoster um die Freischaltung dieser beiden Domains.
• Die Autovervollständigung schlägt nichts vor — der Katalog konnte nicht heruntergeladen werden (Netzwerk). Klicken Sie auf den Katalog-Aktualisieren-Button, oder tippen Sie den exakten Familiennamen und bestätigen Sie mit Enter: Der Direktimport funktioniert auch ohne Katalog.
• Schreibfehler beim Import oder Neuaufbau — geben Sie dem Webserver Schreibrechte auf modules/dffontmanager/views/fonts/ und modules/dffontmanager/views/css/generated/.
• Google-Aufrufe bestehen trotz der Entfernungsoption fort — identifizieren Sie die Quelle im Netzwerk-Tab (Spalte Initiator). Stammt sie aus einem Drittanbieter-Iframe (Zahlung, Bewertungen, Karten), kann die HTML-Bereinigung dort nicht greifen: Es gilt dann die Einwilligung dieses Drittanbieters.

Modul aktualisieren

Deinstallation

Die Deinstallation entfernt beide Tabellen, die Konfigurationsschlüssel, die heruntergeladenen Schriftdateien und das generierte Stylesheet. Ihr Shop zeigt sofort wieder die ursprünglichen Schriften seines Themes — ohne Rückstände.