# Google Fonts Local: czcionki hostowane lokalnie zgodne z RODO (dffontmanager)
> DF Font Manager hostuje czcionki Google Fonts bezpośrednio na Twoim serwerze PrestaShop: odwiedzający nigdy więcej nie kontaktują się z serwerami Google (zgodność z RODO), a Ty zmieniasz typografię sklepu prostymi…
- Strona:
- Język: pl
- Zaktualizowano: 2026-07-30
- Inne języki: [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), [pt](https://www.datafirefly.com/pt/documentation/dffontmanager/index.md), [nl](https://www.datafirefly.com/nl/documentation/dffontmanager/index.md)
- Indeks:
DF Font Manager hostuje czcionki Google Fonts bezpośrednio na Twoim serwerze PrestaShop: odwiedzający nigdy więcej nie kontaktują się z serwerami Google (zgodność z RODO), a Ty zmieniasz typografię sklepu prostymi regułami CSS, bez modyfikacji choćby jednego pliku motywu. Moduł obsługuje import z katalogu Google Fonts, automatyczny subsetting per alfabet, preloading pliku krytycznego, strategię font-display i upload własnych czcionek.
Ta dokumentacja obejmuje wersję **1.0.0** modułu, zgodną z PrestaShop **8.0.0 do 9.x**. Żadnego override klas, żadnej zależności Composer, vanilla JS bez jQuery.
## Instalacja
1. W panelu administracyjnym PrestaShop otwórz **Moduły > Menedżer modułów**.
2. Kliknij **Zainstaluj moduł** i wgraj plik `dffontmanager.zip`.
3. W menu **Wygląd** pojawia się zakładka **Menedżer czcionek**: tam dzieje się wszystko (przycisk Konfiguruj modułu też tam przekierowuje).
Moduł rejestruje się na trzech hookach (`displayHeader`, `actionFrontControllerSetMedia`, `actionOutputHTMLBefore`) i tworzy dwie tabele: zainstalowane czcionki oraz reguły podmiany. Pliki czcionek są przechowywane w `modules/dffontmanager/views/fonts/`, a wygenerowany arkusz stylów w `modules/dffontmanager/views/css/generated/`: sprawdź, czy te foldery mają prawa zapisu.
## Ustawienia ogólne
- **Włącz czcionki hostowane lokalnie**: główny przełącznik: ładuje wygenerowany arkusz stylów i znaczniki preloadingu na froncie.
- **Usuń zewnętrzne wywołania Google Fonts (RODO)**: czyści renderowany HTML sklepu: wszystkie znaczniki link wskazujące na `fonts.googleapis.com` lub `fonts.gstatic.com` (arkusze stylów, preconnect, preloady) oraz odpowiadające im inline'owe `@import` są usuwane przed wysłaniem strony. To ta opcja gwarantuje, że żadne żądanie nie idzie do Google, nawet jeśli Twój motyw lub inny moduł je wstrzykuje.
- **Strategia font-display**: stosowana do wszystkich generowanych deklaracji `@font-face`. `swap` (domyślnie) utrzymuje tekst widoczny podczas ładowania; `block`, `fallback`, `optional` i `auto` są dostępne do potrzeb specjalnych.
Rekomendacja: zostaw `swap`. To najlepszy kompromis dla Core Web Vitals: żadnego niewidocznego tekstu (FOIT), żadnej kary LCP.
## Import czcionki Google Fonts
1. W panelu **Importuj czcionkę Google** wpisz co najmniej dwa znaki: autouzupełnianie przeszukuje pełny katalog Google Fonts, cache'owany 7 dni na Twoim serwerze (przycisk odświeżania obok pola).
2. Wybierz rodzinę: wyświetlają się dostępne **warianty** (grubości 100 do 900, normal i italic) oraz **alfabety**. Domyślnie zaznaczone są grubości 400 i 700 oraz subsety latin + latin-ext.
3. Kliknij **Importuj lokalnie**.
Moduł odpytuje wtedy API CSS Google, pobiera oficjalne pliki woff2 odpowiadające Twojemu wyborowi (jeden plik per alfabet i per wariant), weryfikuje ich sygnaturę binarną, układa w `views/fonts/nazwa-rodziny/` i regeneruje arkusz stylów. Strona przeładowuje się z rodziną widoczną w tabeli zainstalowanych czcionek, wraz z jej łączną wagą na dysku.
Pobranie odbywa się tylko raz, serwer do serwera, w momencie importu. Twoi odwiedzający nigdy nie uczestniczą w tym żądaniu: po stronie frontu wszystko jest serwowane z Twojej domeny.
### Automatyczny subsetting
Google dzieli każdą czcionkę na pliki per alfabet (latin, latin-ext, cyrylica, greka, wietnamski itd.). Moduł pobiera tylko zaznaczone alfabety i zachowuje dla każdego pliku oryginalny `unicode-range` w deklaracji `@font-face`. Przeglądarka pobiera więc tylko zakresy znaków rzeczywiście wyświetlane na stronie: typowy sklep serwuje 20 do 90 KB czcionek zamiast kilkuset.
Zaznaczaj tylko alfabety swojej rzeczywistej publiczności. Zawsze możesz zaimportować rodzinę ponownie z dodatkowymi subsetami: import czysto podmienia istniejące pliki, zachowując Twoje ustawienia (preloading, aktywacja) i reguły.
### Ponowny import lub modyfikacja rodziny
Aby dodać grubość lub alfabet do zainstalowanej już rodziny, po prostu wykonaj import ponownie z nowym wyborem: stare pliki rodziny są podmieniane, a reguły podmiany, które jej używają, pozostają nietknięte.
## Upload własnej czcionki
Panel **Upload własnej czcionki** akceptuje formaty `woff2` (zalecany), `woff`, `ttf` i `otf`. Podaj nazwę rodziny, grubość i styl, następnie wyślij plik: jeden plik per kombinacja grubość/styl, scalane automatycznie w jedną rodzinę. Każdy plik jest walidowany po sygnaturze binarnej (a nie po rozszerzeniu), a następnie włączany do wygenerowanego arkusza i dostępny w regułach dokładnie jak czcionka Google.
Sprawdź, czy Twoja licencja pozwala na użycie webowe w self-hostingu, zwłaszcza dla czcionek komercyjnych kupionych u odlewni.
## Zarządzanie zainstalowanymi czcionkami
Tabela zainstalowanych czcionek pokazuje dla każdej rodziny: źródło (google lub custom), warianty, subsety, liczbę plików i ich wagę na dysku, a następnie dwa przełączniki:
- **Aktywna**: włącza lub wyłącza rodzinę w wygenerowanym arkuszu stylów (pliki pozostają na dysku).
- **Preloading**: patrz dedykowana sekcja poniżej.
Przycisk usuwania wycofuje rodzinę, jej pliki z dysku i wszystkie reguły, które jej używają, a następnie przebudowuje arkusz stylów.
## Reguły podmiany
To tutaj stosujesz swoje czcionki bez dotykania motywu. Każda reguła łączy **selektor CSS** z **zainstalowaną czcionką**, z czterema opcjami:
- **Grubość**: wymusza `font-weight` (zostaw puste, aby dziedziczyć z motywu);
- **Styl**: normal lub italic (puste = dziedziczenie);
- **Stos zapasowy**: rodziny generyczne wyświetlane, zanim czcionka się załaduje: `sans-serif`, `serif`, `monospace` lub `system-ui, sans-serif`;
- **!important**: zaznaczone domyślnie, gwarantuje, że reguła wygrywa ze stylami motywu niezależnie od ich specyficzności.
Przykłady typowych selektorów:
- `body`: cały sklep;
- `h1, h2, h3, h4, h5, h6`: wszystkie nagłówki;
- `.btn, button`: przyciski;
- `.product-title, .h3.product-title`: tytuły produktów na listingach (do dostosowania pod motyw).
Typowa konfiguracja to dwie reguły: `body` na Twoją czcionkę w 400 ze stosem `sans-serif`, potem `h1, h2, h3, h4` na tę samą rodzinę w 700. Zbadaj motyw narzędziami deweloperskimi przeglądarki, aby precyzyjniej wskazać selektory.
Każde dodanie lub usunięcie reguły natychmiast przebudowuje arkusz stylów. Arkusz jest ładowany _po_ CSS motywu: nawet bez `!important` Twoje reguły wygrywają kaskadę przy równej specyficzności.
## Preloading: dobre praktyki
Przełącznik **Preloading** rodziny emituje w nagłówku strony znacznik `link rel=preload as=font crossorigin` dla jej pliku krytycznego, wybieranego automatycznie: woff2, styl normal, alfabet latin, grubość najbliższa 400. Przeglądarka pobiera więc czcionkę równolegle z CSS, jeszcze zanim odkryje jej użycie: docelowy tekst pojawia się wcześniej.
Preloaduj tylko jedną lub dwie rodziny rzeczywiście używane above the fold. Każdy preload konsumuje priorytetowe pasmo: nadużycie pogarsza LCP zamiast go poprawiać.
## Działanie techniczne
- Wygenerowany arkusz `fonts-v{znacznik czasu}.css` zawiera wszystkie deklaracje `@font-face` (z `font-display` i `unicode-range`), a po nich reguły podmiany. Każda przebudowa produkuje nową nazwę pliku (automatyczny cache-busting) i czyści stare wersje.
- Jest rejestrowany przez `actionFrontControllerSetMedia` z priorytetem umieszczającym go po CSS motywu.
- Znaczniki preloadingu są emitowane przez `displayHeader`; lista plików krytycznych jest cache'owana w konfiguracji: żadnego dodatkowego zapytania SQL per strona front.
- Usuwanie zewnętrznych wywołań wykonuje się w `actionOutputHTMLBefore`, na finalnym HTML, po cache Smarty.
- Przycisk **Przebuduj CSS** wymusza pełną regenerację, przydatną po ręcznej ingerencji w pliki lub przywróceniu kopii zapasowej.
## Weryfikacja zgodności z RODO
1. Otwórz sklep w oknie przeglądania prywatnego.
2. Otwórz narzędzia deweloperskie (F12), zakładka **Sieć**, i filtruj po `fonts.g`.
3. Przeładuj stronę: lista powinna pozostać pusta. Jeśli pojawia się żądanie do `fonts.googleapis.com` lub `fonts.gstatic.com`, włącz opcję usuwania zewnętrznych wywołań i wyczyść cache PrestaShop.
Przetestuj stronę główną, kartę produktu i checkout: niektóre moduły płatności lub widgety stron trzecich ładują własne czcionki w iframe'ach, poza zasięgiem czyszczenia HTML (wtedy obowiązują ich własne banery zgód).
## Multisklep
Zaimportowane czcionki i reguły podmiany są współdzielone przez wszystkie sklepy jednej instalacji. Przełączniki aktywacji i opcja usuwania zewnętrznych wywołań podążają za standardowym kontekstem konfiguracji PrestaShop.
## Rozwiązywanie problemów
- **Czcionka nie wyświetla się na froncie**: sprawdź po kolei: główny przełącznik jest włączony, rodzina jest aktywna, istnieje reguła podmiany dla właściwego selektora, a cache PrestaShop jest wyczyszczony (Zaawansowane > Wydajność). Następnie zbadaj element w przeglądarce: jeśli reguła jest przekreślona, bardziej specyficzny styl motywu ją nadpisuje, zaznacz `!important` na regule.
- **Import kończy się błędem sieci**: Twój serwer musi mieć dostęp wychodzący do `fonts.googleapis.com` i `fonts.gstatic.com` (cURL lub allow_url_fopen). Na serwerze za restrykcyjnym firewallem poproś hostingodawcę o otwarcie tych dwóch domen.
- **Autouzupełnianie niczego nie proponuje**: katalog nie mógł zostać pobrany (sieć). Kliknij przycisk odświeżania katalogu albo wpisz dokładną nazwę rodziny i zatwierdź Enterem: import bezpośredni działa bez katalogu.
- **Błąd zapisu przy imporcie lub przebudowie**: nadaj prawa zapisu serwerowi WWW na `modules/dffontmanager/views/fonts/` i `modules/dffontmanager/views/css/generated/`.
- **Wywołania Google pozostają mimo opcji usuwania**: zidentyfikuj źródło w zakładce Sieć (kolumna inicjator). Jeśli to iframe strony trzeciej (płatność, opinie, mapa), czyszczenie HTML nie może się do niego zastosować: rządzi wtedy zgoda tej usługi zewnętrznej.
## Aktualizacja modułu
Pliki czcionek i wygenerowany arkusz żyją w folderze modułu. Aktualizacja wykonana przez **nadpisanie folderu** `modules/dffontmanager/` usuwa zaimportowane czcionki. Po takiej aktualizacji otwórz menedżer i zaimportuj rodziny ponownie (dwa kliknięcia per rodzina: Twoje ustawienia i reguły, przechowywane w bazie, są zachowane). Aktualizacja przez standardowy Menedżer modułów wywołuje to samo zachowanie: zaplanuj ponowny import od razu.
## Deinstalacja
Deinstalacja usuwa obie tabele, klucze konfiguracji, pobrane pliki czcionek i wygenerowany arkusz stylów. Sklep natychmiast wraca do oryginalnych czcionek motywu: żadnych pozostałości.