# Google Fonts Lokaal: zelfgehoste lettertypen en AVG (dffontmanager)

> DF Font Manager host uw Google Fonts rechtstreeks op uw PrestaShop-server: uw bezoekers nemen nooit meer contact op met de servers van Google (AVG-conform), en u wijzigt de typografie van…

- Pagina: <https://www.datafirefly.com/nl/documentation/dffontmanager/>
- Taal: nl
- Bijgewerkt op: 2026-09-09
- Andere talen: [fr](https://www.datafirefly.com/documentation/dffontmanager/index.md), [en](https://www.datafirefly.com/en/documentation/dffontmanager/index.md), [es](https://www.datafirefly.com/es/documentation/dffontmanager/index.md), [de](https://www.datafirefly.com/de/documentation/dffontmanager/index.md), [it](https://www.datafirefly.com/it/documentation/dffontmanager/index.md), [pl](https://www.datafirefly.com/pl/documentation/dffontmanager/index.md), [pt](https://www.datafirefly.com/pt/documentation/dffontmanager/index.md)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

DF Font Manager host uw Google Fonts rechtstreeks op uw PrestaShop-server: uw bezoekers nemen nooit meer contact op met de servers van Google (AVG-conform), en u wijzigt de typografie van uw winkel met eenvoudige CSS-regels, zonder ook maar één bestand van het thema aan te raken. De module regelt de import uit de Google Fonts-catalogus, de automatische subsetting per alfabet, het vooraf laden van het kritieke bestand, de font-displaystrategie en het uploaden van eigen lettertypen.

Deze documentatie behandelt versie **1.0.0** van de module, geschikt voor PrestaShop **8.0.0 tot 9.x**. Geen enkele klasse-override, geen Composer-afhankelijkheid, en pure JavaScript zonder jQuery.

## Installatie

1. Open in uw PrestaShop-backoffice **Modules > Modulebeheer**.
2. Klik op **Een module installeren** en plaats het bestand `dffontmanager.zip`.
3. Onder het menu **Design** verschijnt een tabblad **Lettertypebeheer**: daar gebeurt alles (de knop Configureren van de module leidt daar ook heen).

De module registreert zich op drie hooks (`displayHeader`, `actionFrontControllerSetMedia` en `actionOutputHTMLBefore`) en maakt twee tabellen aan: de geïnstalleerde lettertypen en de vervangingsregels. De lettertypebestanden komen in `modules/dffontmanager/views/fonts/` en het aangemaakte stijlblad in `modules/dffontmanager/views/css/generated/`. Controleer of die mappen beschrijfbaar zijn.

## Algemene instellingen

- **Zelfgehoste lettertypen inschakelen**: de hoofdschakelaar, die het aangemaakte stijlblad en de preloadtags aan de frontzijde laadt.
- **De externe Google Fonts-aanroepen verwijderen (AVG)**: schoont de opgemaakte HTML van de winkel op. Alle link-tags die naar `fonts.googleapis.com` of `fonts.gstatic.com` wijzen (stijlbladen, preconnect, preloads) en de bijbehorende inline `@import`-regels worden vóór het versturen van de pagina weggehaald. Die optie zorgt ervoor dat er geen enkel verzoek naar Google vertrekt, ook al injecteert uw thema of een andere module er een.
- **font-displaystrategie**: geldt voor alle aangemaakte `@font-face`-declaraties. `swap` (de standaard) houdt de tekst zichtbaar tijdens het laden; `block`, `fallback`, `optional` en `auto` zijn er voor specifieke behoeften.

Aanbeveling: laat `swap` staan. Dat is het beste compromis voor de Core Web Vitals, zonder onzichtbare tekst (FOIT) en zonder LCP-straf.

## Een Google Font importeren

1. Typ in het paneel **Een Google-lettertype importeren** minstens twee tekens: de automatische aanvulling doorzoekt de volledige Google Fonts-catalogus, die 7 dagen op uw server in cache staat (met een verversknop naast het veld).
2. Kies een familie: de beschikbare **varianten** (dikte 100 tot 900, normaal en cursief) en de **alfabetten** verschijnen. Standaard staan de diktes 400 en 700 en de subsets latin en latin-ext al aangevinkt.
3. Klik op **Lokaal importeren**.

De module bevraagt dan de CSS-API van Google, downloadt de officiële woff2-bestanden die bij uw keuze passen (één bestand per alfabet en per variant), controleert hun binaire handtekening, plaatst ze in `views/fonts/naam-van-de-familie/` en bouwt het stijlblad opnieuw op. De pagina herlaadt met de familie zichtbaar in de tabel met geïnstalleerde lettertypen, met haar totale schijfgrootte.

Het downloaden gebeurt één keer, van server naar server, op het moment van de import. Uw bezoekers nemen nooit aan dat verzoek deel: aan de frontzijde wordt alles vanaf uw eigen domein geserveerd.

### De automatische subsetting

Google splitst elk lettertype op in bestanden per alfabet (latijn, latin-ext, cyrillisch, Grieks, Vietnamees en zo verder). De module downloadt alleen de aangevinkte alfabetten en behoudt voor elk bestand zijn oorspronkelijke `unicode-range` in de `@font-face`-declaratie. De browser vraagt dus alleen de tekenbereiken op die werkelijk op de pagina staan: een doorsnee Nederlandstalige winkel serveert zo 20 tot 90 KB aan lettertypen in plaats van enkele honderden.

Vink alleen de alfabetten van uw werkelijke publiek aan. U kunt de familie later altijd opnieuw importeren met extra subsets: de import vervangt de bestaande bestanden netjes en houdt uw instellingen (preload, activering) en uw regels aan.

### Een familie opnieuw importeren of aanpassen

Wilt u een dikte of een alfabet aan een al geïnstalleerde familie toevoegen, doe de import dan gewoon opnieuw met de nieuwe keuze: de oude bestanden van de familie worden vervangen en de vervangingsregels die haar gebruiken, blijven intact.

## Een eigen lettertype uploaden

Het paneel **Een eigen lettertype uploaden** aanvaardt de formaten `woff2` (aanbevolen), `woff`, `ttf` en `otf`. Geef de naam van de familie, de dikte en de stijl op en verstuur het bestand: één bestand per combinatie van dikte en stijl, die automatisch onder dezelfde familie worden samengevoegd. Elk bestand wordt op zijn binaire handtekening gecontroleerd (en niet op de extensie), daarna in het aangemaakte stijlblad opgenomen en in de regels beschikbaar, precies als een Google-lettertype.

Ga na of uw licentie het webgebruik met zelfhosting toestaat, zeker bij commerciële lettertypen die u bij een gieterij hebt gekocht.

## De geïnstalleerde lettertypen beheren

De tabel met geïnstalleerde lettertypen toont per familie: de bron (google of custom), de varianten, de subsets, het aantal bestanden en hun schijfgrootte, plus twee schakelaars:

- **Actief**: neemt de familie op in het aangemaakte stijlblad of laat die eruit (de bestanden blijven op de schijf staan).
- **Preload**: zie het aparte onderdeel hieronder.

De verwijderknop haalt de familie, haar bestanden op de schijf en alle regels die haar gebruiken weg, en bouwt daarna het stijlblad opnieuw op.

## Vervangingsregels

Hier past u uw lettertypen toe zonder het thema aan te raken. Elke regel koppelt een **CSS-selector** aan een **geïnstalleerd lettertype**, met vier opties:

- **Dikte**: dwingt een `font-weight` af (laat leeg om die van het thema over te nemen);
- **Stijl**: normaal of cursief (leeg om over te nemen);
- **Terugvalstapel**: de algemene families die verschijnen zolang het lettertype nog niet is geladen: `sans-serif`, `serif`, `monospace` of `system-ui, sans-serif`;
- **!important**: standaard aangevinkt, zodat de regel het haalt van de stijlen van het thema, hoe specifiek die ook zijn.

Voorbeelden van gangbare selectors:

- `body`: de hele winkel;
- `h1, h2, h3, h4, h5, h6`: alle titels;
- `.btn, button`: de knoppen;
- `.product-title, .h3.product-title`: de producttitels in de overzichten (aan te passen aan uw thema).

Een typische opzet in twee regels: `body` naar uw lettertype in 400 met de stapel `sans-serif`, en daarna `h1, h2, h3, h4` naar dezelfde familie in 700. Bekijk uw thema met de ontwikkelaarstools van de browser om de selectors te vinden die u fijner wilt aanspreken.

Elke regel die u toevoegt of verwijdert, bouwt het stijlblad meteen opnieuw op. Het stijlblad wordt _na_ de CSS van het thema geladen: ook zonder `!important` winnen uw regels de cascade bij gelijke specificiteit.

## Preload: goede praktijken

De schakelaar **Preload** van een familie zet boven aan de pagina een tag `link rel=preload as=font crossorigin` voor haar kritieke bestand, dat automatisch wordt gekozen: woff2, normale stijl, latijns alfabet, en de dikte die het dichtst bij 400 ligt. De browser downloadt het lettertype zo parallel met de CSS, nog vóór hij het gebruik ervan ontdekt, waardoor de uiteindelijke tekst sneller verschijnt.

Laad hooguit een of twee families vooraf, en alleen die welke echt boven de vouwlijn worden gebruikt. Elke preload verbruikt bandbreedte met voorrang: er te veel gebruiken verslechtert de LCP in plaats van die te verbeteren.

## Technische werking

- Het aangemaakte stijlblad `fonts-v{tijdstempel}.css` bevat alle `@font-face`-declaraties (met `font-display` en `unicode-range`), gevolgd door de vervangingsregels. Elke heropbouw levert een nieuwe bestandsnaam op (automatische cache-busting) en wist de oude versies.
- Het wordt via `actionFrontControllerSetMedia` geregistreerd met een prioriteit die het na de CSS van het thema plaatst.
- De preloadtags komen uit `displayHeader`; de lijst met kritieke bestanden staat in de configuratie in cache, zodat er per frontpagina geen extra SQL-query nodig is.
- Het weghalen van de externe aanroepen gebeurt in `actionOutputHTMLBefore`, op de uiteindelijke HTML, na de Smarty-cache.
- De knop **De CSS opnieuw opbouwen** dwingt een volledige heropbouw af, wat nuttig is na een handmatige ingreep op de bestanden of na het terugzetten van een back-up.

## De AVG-conformiteit controleren

1. Open uw winkel in een privévenster.
2. Open de ontwikkelaarstools (F12), tabblad **Netwerk**, en filter op `fonts.g`.
3. Herlaad de pagina: de lijst moet leeg blijven. Verschijnt er toch een verzoek naar `fonts.googleapis.com` of `fonts.gstatic.com`, schakel dan de optie voor het weghalen van de externe aanroepen in en leeg de PrestaShop-cache.

Test de startpagina, een productfiche en het afrekenen: sommige betaalmodules of externe widgets laden hun eigen lettertypen in iframes, buiten het bereik van het opschonen van de HTML (daar geldt dan hun eigen toestemmingsbanner).

## Multistore

De geïmporteerde lettertypen en de vervangingsregels worden door alle winkels van eenzelfde installatie gedeeld. De activeringsschakelaars en de optie voor het weghalen van de externe aanroepen volgen de gewone configuratiecontext van PrestaShop.

## Problemen oplossen

- **Het lettertype verschijnt niet aan de frontzijde**: controleer op volgorde of de hoofdschakelaar aanstaat, of de familie actief is, of er een vervangingsregel voor de juiste selector bestaat, en of de PrestaShop-cache is geleegd (Geavanceerde parameters > Prestaties). Inspecteer daarna het element in de browser: staat de regel doorgestreept, dan overschrijft een specifiekere stijl van het thema haar. Vink dan `!important` aan op de regel.
- **De import mislukt met een netwerkfout**: uw server moet `fonts.googleapis.com` en `fonts.gstatic.com` uitgaand kunnen bereiken (via cURL of allow_url_fopen). Staat uw server achter een strenge firewall, vraag uw host dan die twee domeinen open te zetten.
- **De automatische aanvulling stelt niets voor**: de catalogus kon niet worden gedownload (netwerk). Klik op de verversknop van de catalogus, of typ de exacte naam van de familie en bevestig met Enter: de rechtstreekse import werkt ook zonder de catalogus.
- **Schrijffout bij de import of de heropbouw**: geef de webserver schrijfrechten op `modules/dffontmanager/views/fonts/` en `modules/dffontmanager/views/css/generated/`.
- **Er blijven Google-aanroepen ondanks de optie**: zoek de bron in het tabblad Netwerk (kolom initiator). Gaat het om een extern iframe (betaling, reviews, kaart), dan kan het opschonen van de HTML daar niet bij: dan geldt de toestemming van die externe dienst.

## De module bijwerken

De lettertypebestanden en het aangemaakte stijlblad staan in de map van de module. Werkt u bij door de map `modules/dffontmanager/` te **overschrijven**, dan verdwijnen de geïmporteerde lettertypen. Open na zo'n update het beheerscherm en importeer uw families opnieuw (twee klikken per familie: uw instellingen en regels staan in de database en blijven behouden). Een update via het gewone Modulebeheer geeft hetzelfde gedrag: plan de herimport dus meteen erna in.

## Verwijderen

Bij het verwijderen verdwijnen de twee tabellen, de configuratiesleutels, de gedownloade lettertypebestanden en het aangemaakte stijlblad. Uw winkel krijgt meteen de oorspronkelijke lettertypen van haar thema terug, zonder restanten.