Gdy Twoja witryna WordPress ładuje Google Fonts z fonts.googleapis.com, przeglądarka każdego odwiedzającego wysyła żądanie do serwerów Google. Żądanie to zawiera adres IP odwiedzającego, user agent, URL referrera oraz inne metadane. Google otrzymuje te dane przy każdym wywołaniu strony, co stanowi poważny problem dotyczący prywatności w świetle europejskich przepisów o ochronie danych.
Dlaczego Google Fonts to problem GDPR
W styczniu 2022 roku niemiecki sąd (LG München, sprawa 3 O 17493/20) orzekł, że osadzanie Google Fonts za pomocą standardowego linku zewnętrznego stanowi naruszenie GDPR. Sąd stwierdził, że przekazywanie adresu IP odwiedzającego do Google bez wcześniejszej zgody narusza artykuł 6 ust. 1 GDPR, ponieważ operator witryny nie ma uzasadnionego interesu, który przeważałby nad prawem użytkownika do ochrony danych. Operator witryny został zobowiązany do wypłaty odszkodowania poszkodowanemu odwiedzającemu.
Wyrok ten stworzył wyraźny precedens w całej UE. Od tego czasu kilka kancelarii prawnych wysłało masowe pisma ostrzegawcze do operatorów witryn, którzy nadal ładują Google Fonts zewnętrznie. Rozwiązanie jest proste: hostuj pliki czcionek na własnym serwerze, aby żadne dane nie były wysyłane do Google. Takie podejście jest w pełni zgodne z GDPR, eliminuje ryzyko prawne, a często też poprawia szybkość ładowania.
Pobieranie Google Fonts do samodzielnego hostowania
Najprostszym sposobem uzyskania odpowiednich plików czcionek z właściwym CSS jest narzędzie Google Webfonts Helper autorstwa Mario Ranftla. Oto jak go używać:
- Otwórz Google Webfonts Helper i znajdź potrzebną czcionkę (np. "Open Sans", "Roboto", "Lato").
- Wybierz potrzebne zestawy znaków. Dla większości europejskich witryn wystarczą "latin" i "latin-ext". Dodaj "cyrillic" lub "greek" tylko wtedy, gdy Twoje treści faktycznie używają tych systemów pisma.
- Wybierz grubości i style czcionek, których używasz w swojej witrynie. Typowe wybory to 400 (regular), 400 italic, 700 (bold) i 700 italic. Unikaj wybierania grubości, których faktycznie nie używasz, ponieważ każda grubość zwiększa rozmiar pliku.
- Narzędzie generuje gotowe do użycia reguły CSS
@font-face. Skopiuj je. Możesz dostosować prefiks ścieżki pliku do struktury katalogów swojego serwera. - Pobierz plik zip zawierający wszystkie wybrane pliki czcionek w nowoczesnych formatach (woff2 i woff).
Ręczne samodzielne hostowanie krok po kroku
Krok 1: Wgraj pliki czcionek
Utwórz katalog fonts w katalogu motywu lub motywu potomnego i wgraj tam pobrane pliki czcionek:
/wp-content/themes/twoj-motyw/fonts/
open-sans-v40-latin-regular.woff2
open-sans-v40-latin-regular.woff
open-sans-v40-latin-700.woff2
open-sans-v40-latin-700.woffJeśli używasz motywu potomnego, umieść czcionki w jego katalogu, aby przetrwały aktualizacje motywu nadrzędnego.
Krok 2: Dodaj CSS @font-face
Dodaj CSS wygenerowany przez Google Webfonts Helper do arkusza stylów swojego motywu lub niestandardowego pliku CSS. Upewnij się, że ustawiasz font-display: swap, aby tekst pozostał widoczny podczas ładowania czcionek:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}Krok 3: Usuń zewnętrzne odwołanie do Google Fonts
Musisz uniemożliwić swojemu motywowi ładowanie czcionek z fonts.googleapis.com. Zazwyczaj robi się to przez wyrejestrowanie uchwytu stylu. Nazwa uchwytu różni się w zależności od motywu, więc być może będziesz musiał zbadać źródło HTML, aby ją znaleźć:
add_action('wp_enqueue_scripts', function() {
// Typowe nazwy uchwytów używane przez motywy
wp_dequeue_style('google-fonts');
wp_deregister_style('google-fonts');
// Niektóre motywy używają innych uchwytów
wp_dequeue_style('flavor-google-fonts');
wp_deregister_style('flavor-google-fonts');
// Motyw Divi
wp_dequeue_style('divi-fonts');
wp_deregister_style('divi-fonts');
}, 100);Priorytet 100 zapewnia, że ten kod zostanie wykonany po dodaniu stylów przez motyw. Jeśli motyw używa innej nazwy uchwytu, sprawdź źródło strony pod kątem znacznika <link> z fonts.googleapis.com i zanotuj atrybut id (usuń końcówkę -css, aby uzyskać nazwę uchwytu).
Niektóre motywy kodują link Google Fonts bezpośrednio w nagłówku szablonu zamiast używać wp_enqueue_style. W takim przypadku być może trzeba będzie edytować szablon nagłówka lub użyć motywu potomnego, aby go nadpisać.
Samodzielne hostowanie za pomocą wtyczki
Jeśli wolisz nie pracować ręcznie z plikami czcionek i CSS, wtyczki mogą zautomatyzować cały proces:
- OMGF (Optimize My Google Fonts): automatycznie wykrywa Google Fonts ładowane na Twojej witrynie, pobiera pliki czcionek na serwer, generuje lokalny CSS
@font-facei usuwa zewnętrzne odwołania do Google Fonts. Preloaduje też czcionki dla lepszej wydajności i obsługuje cache-busting. To najpopularniejsza opcja do tego konkretnego zadania. - Asset CleanUp (Pro): oprócz ogólnej optymalizacji zasobów potrafi wykrywać Google Fonts i hostować je lokalnie. Oferuje większą kontrolę nad tym, które strony ładują które czcionki, co jest przydatne dla witryn, w których różne sekcje używają różnej typografii.
- Perfmatters: zawiera funkcję lokalnych Google Fonts obok innych narzędzi optymalizacji wydajności. Dobry wybór, jeśli chcesz jednej wtyczki do wielu usprawnień wydajności.
Zrozumienie font-display: swap
Właściwość font-display: swap w regułach @font-face jest ważna dla doświadczenia użytkownika i Core Web Vitals. Bez niej przeglądarki mogą ukrywać tekst do momentu zakończenia ładowania czcionki (znane jako FOIT, czyli Flash of Invisible Text). Z swap przeglądarka natychmiast wyświetla tekst używając zapasowej czcionki systemowej i zastępuje ją, gdy tylko niestandardowa czcionka zostanie załadowana. Zapobiega to wliczaniu przesunięć układu do wyniku Cumulative Layout Shift (CLS) i zapewnia, że treść pozostaje czytelna nawet przy wolnych połączeniach.
Subsetting czcionek dla lepszej wydajności
Jeśli chcesz iść dalej z optymalizacją, rozważ subsetting czcionek. Pełny plik czcionki "Latin Extended" może zawierać znaki dla języków, których nigdy nie używasz w swojej witrynie. Narzędzia takie jak fonttools (pyftsubset) lub Everything Fonts Subsetter potrafią usunąć nieużywane znaki i znacząco zmniejszyć rozmiar pliku. Na przykład plik czcionki pokrywający cały Latin Extended może mieć 25KB, ale subset zawierający tylko znaki używane w języku polskim i angielskim może być mniejszy niż 15KB. Dla większości witryn zestawy znaków oferowane przez Google Webfonts Helper są już rozsądnym subsetem, więc ten krok jest opcjonalny.
Weryfikacja braku zewnętrznych żądań czcionek
Po wprowadzeniu zmian ważne jest sprawdzenie, czy nie ma już żądań do fonts.googleapis.com lub fonts.gstatic.com. Otwórz Narzędzia deweloperskie przeglądarki (F12), przejdź do zakładki Network, przeładuj stronę i przefiltruj po "font" lub wyszukaj "googleapis". Sprawdź kilka stron, nie tylko stronę główną, ponieważ niektóre motywy ładują różne czcionki na różnych szablonach stron.
Sprawdź też Google Fonts ładowane przez wtyczki. Niektóre kreatory stron, wtyczki ze sliderami lub wtyczki formularzy ładują własne Google Fonts niezależnie od motywu. Być może trzeba będzie sprawdzić ustawienia każdej wtyczki pod kątem opcji "wyłącz Google Fonts" lub "ładuj czcionki lokalnie".
Weryfikacja za pomocą InspectWP
Uruchom nowe skanowanie InspectWP po wprowadzeniu zmian. Sekcja GDPR Twojego raportu pokaże, czy nadal istnieją żądania do serwerów Google Fonts. InspectWP sprawdza połączenia zarówno z fonts.googleapis.com (CSS), jak i fonts.gstatic.com (same pliki czcionek). Jeśli wszystkie czcionki są poprawnie hostowane lokalnie, żadna z tych domen nie powinna pojawić się na liście zasobów zewnętrznych.