Google Fonts a RODO: jak trzymać czcionki na własnym serwerze
Gdy strona pobiera czcionki z serwerów Google (fonts.googleapis.com), przeglądarka każdego gościa wysyła Google swój adres IP, czyli numer połączenia z internetem. Dzieje się to, zanim gość zdąży o czymkolwiek zdecydować. Najprostsze wyjście: pobierz pliki czcionek i trzymaj je na własnym serwerze. Wygląd strony się nie zmienia, a połączenie z Google znika.
- RODO, czyli unijne przepisy o ochronie danych osobowych, w motywie 30 (we wstępie, który wyjaśnia przepisy) wymienia adresy IP wśród identyfikatorów internetowych. Mogą one posłużyć do rozpoznania osoby i budowania jej profilu.
- Sąd krajowy w Monachium (LG München I) 20 stycznia 2022 r. wydał wyrok w sprawie Google Fonts (sygnatura 3 O 17493/20). Uznał za naruszenie to, że strona bez zgody gościa przekazała Google jego zmienny adres IP. Zasądził 100 euro zadośćuczynienia.
- Według repozytorium Google Fonts wszystkie czcionki z tej biblioteki mają licencje, które pozwalają je rozpowszechniać. Możesz więc trzymać je na własnym serwerze.
- Od wersji 86 Chrome trzyma osobną pamięć podręczną dla każdej strony. Pamięć podręczna to pliki zapisane w przeglądarce, żeby nie pobierać ich drugi raz. Czcionka pobrana z Google na jednej stronie nie przyda się więc na innej.
W czym problem z czcionką z serwerów Google
Google Fonts to darmowa biblioteka czcionek. Najprościej użyć jej jedną linijką w kodzie strony, która każe przeglądarce pobrać czcionkę z serwerów Google. Arkusz stylów, czyli plik CSS z wyglądem strony, przychodzi wtedy z fonts.googleapis.com, a pliki czcionek z fonts.gstatic.com.
Każde takie pobranie to połączenie z serwerem Google. Każde połączenie ujawnia adres IP gościa.
RODO w motywie 30 wymienia adresy IP wśród identyfikatorów, które mogą pozwolić rozpoznać osobę. Strona, która osadza czcionkę w ten sposób, sama przekazuje adres IP firmie z zewnątrz. Robi to już przy pierwszym wejściu, zanim gość kliknie cokolwiek w banerze cookies.
Głośny wyrok w tej sprawie wydał niemiecki sąd w Monachium w styczniu 2022 r. Uznał, że strona nie miała podstawy, by przekazywać adres IP do Google. Z tych samych czcionek można przecież korzystać bez łączenia się z Google. Sąd kazał przestać to robić i zasądził 100 euro. Wyrok jest niemiecki, ale opiera się na RODO, które w Polsce obowiązuje tak samo.
Rozwiązanie: czcionki na własnym serwerze
Czcionki z Google Fonts mają otwarte licencje, najczęściej SIL Open Font License. Taka licencja pozwala kopiować czcionkę i udostępniać ją dalej. Repozytorium Google Fonts pisze wprost, że możesz trzymać te czcionki u siebie.
Jako jedną z popularnych dróg repozytorium podaje projekt Fontsource, czyli gotowe paczki czcionek do wgrania na własny serwer. Pliki leżą wtedy obok reszty strony. Przeglądarka gościa nie łączy się z nikim poza Twoim serwerem.
Wygląd strony zostaje ten sam, bo to te same pliki. Nie potrzebujesz zgody w banerze cookies ani wpisu o Google Fonts w polityce prywatności, bo do Google nic nie wychodzi.
- Spisz czcionki i grubości, których używa strona, na przykład Inter 400 (zwykła) i 700 (pogrubiona). Zwykle widać je w ustawieniach motywu albo w linku do fonts.googleapis.com.
- Pobierz pliki w formacie WOFF2, czyli w formacie czcionek przygotowanym dla stron internetowych. Wybierz zestaw znaków latin-ext. Zawiera on polskie litery ą, ę, ł, ś i pozostałe.
- Wgraj pliki na serwer, na przykład do katalogu /fonts/. W arkuszu stylów dodaj regułę @font-face, która mówi przeglądarce, gdzie leży plik czcionki. Dopisz w niej
font-display: swap, żeby tekst był widoczny od razu. - Usuń z kodu wszystkie odwołania do fonts.googleapis.com i fonts.gstatic.com. Usuń też linijki preconnect, które z góry otwierają połączenie z Google.
- Sprawdź w przeglądarce, czy polskie znaki wyglądają dobrze. W zakładce Sieć nie powinno już być połączeń z Google.
Czy strona będzie szybsza?
Web.dev, serwis Google z poradami dla twórców stron, pisze o tym ostrożnie. W teorii czcionki z własnego serwera powinny ładować się szybciej, bo przeglądarka nie łączy się z dodatkowym serwerem. W praktyce różnica bywa niewielka.
Google Fonts robi za Ciebie dwie rzeczy, o które przy własnych plikach dbasz sam. Dzieli czcionkę na mniejsze zestawy znaków. Podaje ją też w formacie WOFF2, który według web.dev kompresuje o około 30% lepiej niż starszy format WOFF.
Odpada za to częsty argument, że czcionka z Google „i tak jest już w przeglądarce, bo gość widział ją na innej stronie”. Od wersji 86 Chrome trzyma osobną pamięć podręczną dla każdej strony. Plik pobrany na innej witrynie nie zostanie więc użyty ponownie.
Gdzie Google Fonts potrafi się schować
Usunięcie jednej linijki z nagłówka strony często nie wystarcza. Czcionki z Google ładują też motywy, kreatory stron i wtyczki, na przykład z suwakami zdjęć albo formularzami. Czasem robi to plik CSS przez instrukcję @import, która dołącza do niego inny plik.
W WordPressie wiele motywów i kreatorów ma w ustawieniach opcję lokalnego ładowania czcionek. Poszukaj jej, zanim zaczniesz poprawiać kod.
Ta sama zasada dotyczy innych rzeczy z cudzych serwerów, które ładują się bez pytania: map, filmów z serwisów wideo i czatów. Każda z nich łączy przeglądarkę gościa z innym serwerem. Czcionki najłatwiej przenieść, bo to zwykłe pliki.
Jak sprawdzić to samemu
- Otwórz źródło strony: naciśnij Ctrl+U (na Macu Cmd+Option+U). Wyszukaj fonts.googleapis i fonts.gstatic.
- Otwórz stronę w oknie prywatnym i naciśnij F12, żeby otworzyć narzędzia przeglądarki. Przejdź do zakładki Sieć (Network), wpisz w filtrze fonts.g i odśwież stronę. Każdy wiersz na liście to połączenie z serwerem Google.
- Powtórz test na kilku podstronach, na przykład na stronie kontaktu i w sklepie. Wtyczki ładują czcionki tylko tam, gdzie działają.
- Po zmianach sprawdź zdanie z polskimi znakami, na przykład „Zażółć gęślą jaźń”, w nagłówkach i w treści.
Co sprawdza bezpłatny skan
- Szukamy w kodzie HTML strony głównej, czyli w kodzie, który serwer wysyła przeglądarce, znaczników link, które pobierają plik z fonts.googleapis.com lub fonts.gstatic.com, np. arkusz stylów albo preload. Jeśli są, dostajesz zalecenie, żeby przenieść czcionki na własny serwer. Sam znacznik preconnect, który tylko otwiera połączenie, tej uwagi nie wywołuje.
- Bezpłatny skan czyta tylko kod HTML strony głównej. Czcionki dołączone przez @import w pliku CSS albo w znaczniku
<style>oraz dodane skryptem po załadowaniu strony sprawdzisz w zakładce Sieć, jak opisano wyżej.
Skan sprawdza stronę główną i do 3 podstron. Wynik dostajesz w około minutę.
Kiedy zlecić to komuś: Na prostej stronie przeniesiesz czcionki sam w godzinę. Trudniej jest z motywem, który pobiera je w kilku miejscach naraz, albo ze sklepem z wieloma wtyczkami. Wtedy szybciej będzie zlecić to osobie, która przy okazji sprawdzi inne pliki ładowane z cudzych serwerów. Zobacz pełny audyt.
Pytania i odpowiedzi
Czy w Polsce ktoś dostał karę za Google Fonts?
Często cytowany wyrok jest niemiecki, z Monachium. Opiera się jednak na RODO, które w Polsce obowiązuje tak samo. Przeniesienie czcionek do siebie usuwa problem całkowicie.
Czy wystarczy dodać Google Fonts do banera cookies?
Sam wpis w banerze nie wystarczy, bo połączenie z Google następuje od razu przy ładowaniu strony. Żeby zgoda miała sens, trzeba by wstrzymać czcionki do kliknięcia. Do tego czasu strona pokazywałaby się bez docelowych czcionek. Własne pliki są prostsze.
Czy mogę legalnie skopiować czcionki z Google Fonts?
Tak. Czcionki w tej bibliotece mają licencje, które pozwalają je rozpowszechniać, najczęściej SIL Open Font License. Przy każdej rodzinie czcionek warto sprawdzić plik licencji.