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 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.

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.

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.

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.

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.

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).

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.

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

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.