Google Fonts lokalt i WordPress: GDPR, LG München-dommen og lekkasjefri WOFF2-arkitektur

I mange år har dynamisk lasting av fonter fra fonts.googleapis.com og fonts.gstatic.com vært standarden for WordPress-temaer. En enkel <link>-kode i toppen av HTML-dokumentet var alt som trengtes. Men sett i lys av personvernforordningen (GDPR) og moderne krav til nettytelse medfører denne metoden betydelig risiko.

I denne veiledningen går vi gjennom det juridiske grunnlaget etter dommen i München, forklarer hvorfor en IP-adresse er en personopplysning, og viser hvordan du setter opp en lekkasjefri, lokal WOFF2-arkitektur i WordPress og WooCommerce.

#1. Dommen fra Landgericht München I (sak nr. 3 O 17493/20): Bakgrunn og virkning

Den 20. januar 2022 avsa Landgericht München I (3. sivile avdeling, sak nr. 3 O 17493/20) en prinsipiell dom som førte til en bølge av erstatningskrav og tilsynssaker i hele EØS-området.

#Faktiske forhold

Saksøkte drev et nettsted hvor Google Fonts ble lastet dynamisk fra serverne til Google LLC i USA. Hver gang en bruker besøkte nettstedet, sendte nettleseren automatisk en HTTP-forespørsel til Google med blant annet:

1. Brukerens fulle, offentlige IP-adresse.
2. User-Agent-strengen med informasjon om operativsystem og nettleserversjon.
3. Den nøyaktige nettadressen til siden brukeren besøkte (Referer).

#Rettens vurdering

Retten slo fast at denne behandlingen var ulovlig etter forordning (EU) 2016/679 (GDPR):

• IP-adresse som personopplysning: Etter art. 4 nr. 1 i GDPR og praksis fra EU-domstolen (dom i sak C-582/14 Patrick Breyer mot Tyskland, 19. oktober 2016), utgjør en dynamisk IP-adresse en personopplysning fordi det finnes rettslige midler til å identifisere personen bak adressen.
• Mangel på forhåndssamtykke etter art. 6 nr. 1 bokstav a: Brukeren hadde ikke gitt noe informert eller frivillig samtykke før forespørselen ble sendt til Google LLC.
• Avvisning av berettiget interesse (art. 6 nr. 1 bokstav f): Saksøkte anførte at bruk av eksterne skrifter var nødvendig av estetiske hensyn. Domstolen forkastet dette argumentet fullstendig. Retten påpekte at skriftene enkelt kan lastes ned og hostes lokalt av nettstedeieren uten å overføre opplysninger til servere i tredjeland (i strid med overføringsreglene i art. 44 i GDPR).
• Erstatning etter art. 82 nr. 1: Retten tilkjente saksøkeren 100 EUR i ikke-økonomisk erstatning for tap av kontroll over egne personopplysninger, med trussel om tvangsmulkt på inntil 250 000 EUR ved gjentakelse.

#2. Hvorfor samtykkebannere ikke er en god løsning

Flere byråer har forsøkt å løse problemet ved å blokkere Google Fonts inntil brukeren klikker “Godta alle” i cookie-banneret.

Dette fører imidlertid til tekniske og kommersielle problemer:

1. FOIT og FOUT (usynlig eller feil tekst): Avviser brukeren samtykke, rendres nettbutikken med generiske reserveskrifter (f.eks. Times New Roman), noe som skaper kraftige layout-forskyvninger (Cumulative Layout Shift - CLS).
2. Forsinket rendering: Skriftene begynner ikke å laste før samtykkeskriptet har kjørt, noe som forsinker Largest Contentful Paint (LCP) merkbart.
3. Dårligere konvertering: Kunder som er opptatt av personvern, fortjener en fullverdig og ryddig butikkopplevelse.

Typografi er et sentralt designelement, ikke et sporingselement, og bør ligge lokalt på nettstedets egen server.

#3. Ytelsesgevinster ved lokal hosting (Core Web Vitals)

Myten om at Googles CDN alltid er raskere på grunn av felles nettleserbuffer, er ikke lenger gyldig. Moderne nettlesere isolerer bufferen for hvert enkelt domene (cache partitioning) for å hindre sporing på tvers av nettsteder.

Lokal hosting gir klare fordeler:

#4. Løsningsmodeller i WordPress

Det finnes to hovedmåter å gå frem på i WordPress.

#Løsning A: Frittstående skrift-plugins (f.eks. OMGF / Host Webfonts Locally)

Utviklet av Daan van den Bergh, er OMGF et spesialisert verktøy for å fange opp Google Fonts:

• Funksjon: Skanner innlastede stilark for Google-adresser, laster ned WOFF2-filene til wp-content/uploads/omgf/ og lager et lokalt stilark.
• Fordeler: Enkelt hvis man kun trenger typografikontroll.
• Ulemper: Krever manuell tømming av skriftbuffer ved temaoppdateringer.

#Løsning B: Komplett samsvarspakke med Shoplex

I europeisk e-handel må nettbutikker forholde seg til en rekke regulatoriske krav: Omnibus-direktivet (laveste pris siste 30 dager), B2B-regler, angrerett, panteordninger og kravene i European Accessibility Act (EAA).

Pluginet Shoplex samler disse kravene og har en innebygd LocalFontsService-modul:

• Automatisk zero-leakage: Fanger opp skriftforespørsler via style_loader_src og fjerner unødige <link rel="preconnect" href="https://fonts.gstatic.com">-koder før siden sendes til nettleseren.
• WOFF2-støtte med spesialtegn: Laster ned optimaliserte filer med støtte for nordiske tegn (æ, ø, å), slik at typografien alltid er korrekt.
• Riktig hurtigbuffer: Leverer filene med Cache-Control: public, max-age=31536000, immutable.

#5. Slik bygger du en lekkasjefri løsning i eget tema

Dersom du bygger et skreddersydd tema, kan du legge inn dette direkte i koden.

#Trinn 1: Fjern eksterne skrifter fra temaet

add_action( 'wp_enqueue_scripts', function(): void {
    wp_dequeue_style( 'theme-google-fonts' );
    wp_deregister_style( 'theme-google-fonts' );
}, 999 );

#Trinn 2: Fjern preconnect-lenker

add_filter( 'wp_resource_hints', function( array $urls, string $relation_type ): array {
    if ( in_array( $relation_type, array( 'preconnect', 'dns-prefetch' ), true ) ) {
        $urls = array_filter( $urls, static function( string $url ): bool {
            return ! str_contains( $url, 'fonts.googleapis.com' )
                && ! str_contains( $url, 'fonts.gstatic.com' );
        } );
    }
    return $urls;
}, 10, 2 );

#Trinn 3: Definer lokale skrifter i CSS

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/themes/ditt-tema/assets/fonts/inter-v13-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-02AF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/themes/ditt-tema/assets/fonts/inter-v13-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-02AF;
}

#6. Sjekkliste i DevTools

Etter implementering bør du kontrollere nettverkstrafikken:

1. Åpne et privat nettleservindu (Inkognito).
2. Åpne Utviklerverktøy (F12) og velg fanen Nettverk (Network).
3. Filtrer på: fonts.
4. Last siden på nytt (Ctrl+F5 eller Cmd+Shift+R).
5. Kriterier for suksess:
   • Ingen forespørsler til fonts.googleapis.com eller fonts.gstatic.com.
   • Alle .woff2-filer lastes fra ditt eget domene.
   • Svaret har content-type: font/woff2 og korrekte cache-headere.

#Konklusjon

München-dommen slo ettertrykkelig fast at enkelhet for utvikleren ikke kan gå på bekostning av brukernes personvern.

Lokal hosting av Google Fonts i WordPress er en av de mest effektive forbedringene du kan gjøre: Det sikrer full etterlevelse av GDPR etter art. 6 nr. 1, samtidig som nettbutikken din blir raskere på Core Web Vitals.