...

Integrer Google Fonts lokalt - GDPR-kompatibelt alternativ for mere databeskyttelse

Flere og flere hjemmesideoperatører ønsker Integrer Google Fonts lokalttil bedre at beskytte deres besøgendes personlige data. Dynamisk integrerede skrifttyper overtræder GDPR uden udtrykkeligt samtykke og indebærer en øget risiko for advarsler.

Centrale punkter

  • DatabeskyttelseDynamiske Google Fonts sender IP-adresser til Googles servere - en overtrædelse af GDPR.
  • RetssikkerhedLokal integration reducerer risikoen for advarsler og bøder.
  • Hjemmesidens ydeevneEgne servere leverer ofte skrifttyper hurtigere end eksterne kilder.
  • PluginsVærktøjer som OMGF forenkler den lokale integration betydeligt.
  • Tilpasning af temaSkrifttyper skal specifikt udskiftes i CSS, og alle eksterne links skal fjernes.

Hvorfor dynamisk integration er problematisk

Mange temaer og plugins bruger som standard Google Fonts via Google API. Det betyder, at de besøgendes IP-adresse sendes til servere i USA, hver gang en side åbnes. Ifølge en dom fra den regionale domstol i München udgør dette et brud på databeskyttelsen uden samtykke. Derudover er der ingen måde, hvorpå brugerne specifikt kan gøre indsigelse mod denne overførsel. Dette øger risikoen for betydelige bøder og dyre advarsler betydeligt.

Følgende gælder for alle typer indlejrede tredjepartstjenester: Så snart personoplysninger overføres til servere uden for EU uden samtykke, er det en overtrædelse af GDPR. Selvom Google hævder, at skrifttyper ikke indsamler nogen personlige data, påvirker IP-adressen alene helt klart databeskyttelsen.

Sådan fungerer den lokale integration af Google Fonts

Lokal integration betyder, at du gemmer skrifttyperne på din egen server. Det sparer din webbrowser for serveranmodningen til Google og henter filerne direkte fra dit domæne. Sådan fungerer det trin for trin:

  1. Åben skrifttyper.google.com og vælg de ønskede skrifttyper og varianter.
  2. Download skrifttyperne, og konverter dem til webformatet .woff2 - for eksempel med google-webfonts-hjælper.
  3. Upload .woff2-filerne via FTP eller via din backend til en undermappe som f.eks. /wp-content/fonts/.
  4. Gennemfør den @font-face-kommandoen i CSS'en på din hjemmeside, og indtast stien til din skrifttype.

Et eksempel på CSS-koden:


@font-face {
  font-family: 'OpenSans';
  src: url('/wp-content/fonts/OpenSans-Regular.woff2') format('woff2');
  font-vægt: 400;
  font-style: normal;
}

Brug det derefter i stilarket på din hjemmeside: font-family: 'OpenSans', Arial, sans-serif;

Integrer Google Fonts lokalt i WordPress

WordPress er særligt udsat for uønsket integration af Google Fonts via temaer og plugins. En ofte overset kilde: præinstallerede widgets eller buildere som Elementor, Divi eller WPBakery. Det er derfor værd at foretage en grundig kontrol med værktøjer som "Google Fonts Checker". Synlige forbindelser til skrifttyper.googleapis.com eller skrifttyper.gstatic.com skal fjernes helt.

Det er bedst at oprette et child theme, før du ændrer skrifttyper. Det vil sikre, at dine ændringer bevares, selv efter temaopdateringer. Læg dine skrifttyper ind i mappen i dit child theme, og link lagringsplaceringen i CSS'en. Alternativt kan du også arbejde med et plugin.

Nyttige plugins til lokal integration

Plugins gør tingene meget nemmere, især for mindre tekniske brugere. Nogle værktøjer erstatter automatisk eksterne skrifttyper med lokale versioner:

  • OMGFPlugin'et genkender automatisk brugte Google-skrifttyper, gemmer dem lokalt og erstatter eksterne kald. Den betalte Pro-version tilbyder udvidet caching og understøttelse af brugerdefinerede skrifttyper.
  • Optimer automatiskUd over caching-funktioner giver Autoptimise også kontrol over indlejring af skrifttyper. Særligt praktisk for Elementor- eller Divi-installationer.
  • Skrifttyper Plugin ProKompatibel med næsten alle almindelige sidebyggere. Intuitiv betjening via WordPress-menuen.

Integrer Google Fonts lokalt med sidebygere

Divi-bruger kan deaktivere indlæsning af eksterne skrifttyper i temaindstillingerne. Lokale skrifttyper integreres derefter ved hjælp af Divi Customiser eller ved at tilføje dem til child theme.

Elementor giver mulighed for at uploade og bruge dine egne skrifttyper i området for brugerdefinerede skrifttyper. Automatisk genindlæsning skal først deaktiveres ved hjælp af en kodestump:


add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Med WPBageri Den lokale integration fungerede kun manuelt via direkte CSS-tilpasninger. Skrifttyperne skal placeres i temaet eller child theme og refereres eksplicit.

Håndtering af flere skrifttyper

I mange projekter bruges der ikke kun en enkelt skrifttype, men flere skrifttyper eller endda forskellige skriftfamilier. Det kan føre til forvirrende skrifttypehåndtering. For at få det til at fungere korrekt bør du først notere eller tjekke stilarket for at se, hvilke skrifttyper der bruges hvilke steder.

Især hvis du bruger en sidebygger som Elementor eller Divi, kan forskellige moduler indlæse forskellige skrifttyper. For eksempel kan overskrifter oprettes i "Open Sans" og brødtekster i "Roboto". Der er også fed eller kursiv skrifttype. Det er bedst at lave en liste, hvor du systematisk noterer skrifttyperne og deres varianter. Det forhindrer, at du kun integrerer nogle af de nødvendige skrifttyper lokalt. Manglende skrifttyper medfører ofte visningsfejl eller resulterer i, at enkelte skrifttyper fortsat skal hentes fra Googles servere.

Når du downloader med google-webfonts-hjælper kan du som regel vælge, hvilke skrifttyper og hvilken sprogunderstøttelse du har brug for med det samme. Det minimerer filstørrelsen, men undgår også uønskede forespørgsler til eksterne servere.

Typiske fejl og hvordan du undgår dem

Efter opdateringer kan temaer aktivere eksterne skrifttyper igen. Tjek derfor regelmæssigt via DevTools, om der indlæses skrifttyper fra Google uden tilladelse. For multisites skal du tjekke hver side for sig - indstillingerne gælder ikke globalt. Plugins kan også genintegrere skrifttyper, selv om temaet allerede er blevet tilpasset.

Brug også et crawler toolkit eller browserudvidelser til at tjekke. Der kan forekomme visuelle forskelle, hvis der mangler nogle skrifttyper (kursiv, fed). Sørg for at vælge alle anvendte skrifttypevarianter, når du downloader. En anden fejl er at glemme at forudindlæse skrifttyper. Hvis du leverer større skrifttypefiler lokalt, kan en forudindlæsning i headerkoden minimere gengivelsestiden.

Vigtige overvejelser, før du går live

Før du tager dit projekt i brug eller aktiverer de sidste ændringer på en eksisterende side, anbefaler vi en testfase i et staging- eller udviklingsmiljø. Der kan du tjekke følgende:

  • Glat gengivelseVirker alle skrifttyper, vises tekstblokke korrekt?
  • Manglende skrifttyper: Test eksplicit fed, kursiv og andre varianter i frontend.
  • Fjernede CSS-komponenterNogle gange er der stadig forældet kode i temaet. Sørg for, at der ikke er gamle @import-instruktioner på fonts.googleapis.com.
  • Caching og CDNHvis du bruger et CDN eller har aktiveret aggressiv caching, skal du sikre dig, at skrifttypeændringerne også bliver leveret. Ryd om nødvendigt cachen for at undgå en forældet version.
  • Backup før overgangenLav en fuld backup af dit website og din database, før du udskifter skrifttyper, så du hurtigt kan vende tilbage til den gamle tilstand, hvis det bliver nødvendigt.

Denne grundige kontrol reducerer antallet af fejl og sikrer, at dine besøgende ser et fejlfrit websted, der overholder databeskyttelsesreglerne. Gennemsigtighed er især vigtig, når flere personer arbejder på et website: Dokumenter de skridt, du har taget, og informer dit team om de nye @font-face-regler eller det anvendte plugin.

Præstationsfordele gennem lokal integration

Lokale skrifttyper reducerer ikke kun risikoen for databeskyttelse, men forbedrer ofte også indlæsningstiden for dit website. Da der ikke er nogen anmodning til eksterne servere, leveres skrifttypeindholdet direkte fra hostingserveren. Med hurtige hostere som webhoster.de giver dette målbare fordele. Caching kan også kontrolleres mere effektivt, fordi adgang og version af skrifttypen er under din egen kontrol.

En simpel sammenligning viser forskellene mellem dynamisk og lokal integration:

Funktion Google Fonts (dynamisk) Lokale Google-skrifttyper
Databeskyttelse Kritisk (IP-transmission) GDPR-kompatibel
Opladningstid Langsommere på grund af eksterne anmodninger Hurtigere med god hosting
Opdater sikkerhed Automatiseret via Google Manuel vedligeholdelse nødvendig
Advarsel om risiko Høj Meget lav

OFTE STILLEDE SPØRGSMÅL: Ofte stillede spørgsmål om lokal integration af Google Fonts

1. Hvad med browsere, der ikke understøtter .woff2?
De fleste moderne browsere understøtter webfontformatet .woff2. For meget gamle browsere, der ikke kan læse dette format, kan du også bruge .woff eller andre varianter. Dette er dog ofte ikke længere nødvendigt for de nuværende målgrupper, da markedsdækningen af moderne browsere er høj.

2. Kan brugerne klage, hvis skrifttyperne er indlejret lokalt?
Snarere ikke. Lokal integration er især ønskværdig ud fra et databeskyttelsesperspektiv og går normalt ubemærket hen for de besøgende. Faktisk kan der være positiv feedback, hvis webstedet indlæses hurtigere og håndterer brugerdata mere gennemsigtigt.

3. Hvor stor kan præstationsforbedringen egentlig være?
Det afhænger af hostingen og sidens samlede størrelse. For sider med mange skrifttypevarianter eller flere skrifttyper kan besparelsen på eksterne forespørgsler være tydelig. Lokale skrifttyper har en særlig positiv effekt på besøgende med langsom internetadgang eller i regioner med mindre stabile netværksforbindelser.

4. Skal jeg opdatere skrifttyperne efter et år?
Selve Google Fonts bliver af og til optimeret eller udvidet med nye skrifttyper. I princippet forbliver de eksisterende versioner funktionelle, så det er ikke nødvendigt med en obligatorisk opdatering. Men hvis du altid vil være opdateret (f.eks. når der tilføjes nye glyffer), kan du downloade og udskifte filerne fra tid til anden.

5 Hvad hvis min temaproducent kræver eksterne skrifttyper?
Det er værd at spørge temaudbyderens supportteam om dette. Det er ofte muligt at slå standardskrifttyperne fra eller erstatte dem med dine egne, lokalt integrerede filer. Nogle premium-temaer tilbyder allerede muligheder for dette i indstillingerne.

Hvad hører hjemme i privatlivspolitikken?

Du bør også inkludere en note i privatlivspolitikken til lokal integration. Et kort afsnit er ofte tilstrækkeligt, for eksempel:

"Vi bruger lokale skrifttyper til at designe vores hjemmeside. Der er ingen dataoverførsel til eksterne servere."

På den måde gør du det klart, at brugen er GDPR-kompatibel, og giver besøgende gennemsigtighed om de tekniske processer på dit websted. Lignende regler gælder for eksternt anvendte skrifttypetjenester som Adobe Fonts - de skal også nævnes eksplicit og integreres lokalt.

Bedste praksis for avancerede brugere

Hvis du allerede har beskæftiget dig med den lokale integration af Google Fonts, kan du foretage yderligere optimeringer. Ud over den simple integration via @font-face kan skrifttyper strømlines yderligere ved hjælp af font slicing eller subset-strategier. Disse teknikker reducerer størrelsen på kildefilen ved kun at integrere bestemte tegnsæt (f.eks. kun latinske tegn uden specialtegn).

Hvis du har en international målgruppe, kan det betale sig at dele din hjemmeside op i flere skrifttypefiler for at optimere indlæsningstiden for hver enkelt bruger. Der er også mulighed for at bruge font-display: i CSS'en for at definere, hvordan skrifttypen vises, når den indlæses (f.eks. bytte eller tilbagefald), så brugerne ikke skal vente for længe på den endelige skrifttypevisning.

En strategisk tilgang til serverkonfiguration er også vigtig. Indstil f.eks. de korrekte cache-headere (f.eks. Cache-kontrol og Udløber) til dine skrifttyper, så browsere cacher filerne på lang sigt og ikke behøver at genindlæse dem, hver gang en side kaldes op. Det er især nyttigt, hvis du har brug for skrifttypen flere gange på det samme domæne:


.
    ExpiresActive On
    ExpiresByType font/woff2 "adgang plus 1 år"
    ExpiresByType font/woff "adgang plus 1 år"
.

Med disse indstillinger vil dit websted fungere endnu bedre, og dine skrifttyper vil forblive GDPR-kompatible.

Ekstra sikkerhed: logning og kontrol

Nogle operatører dokumenterer i detaljer, hvordan skrifttyperne er integreret. For eksempel kan interne databeskyttelseskoncepter registrere, hvilke skrifttyper der bruges, hvor de er placeret på serveren, og hvornår de blev downloadet. Dette er især vigtigt for større virksomheder eller agenturer, der skal redegøre for deres databeskyttelsesforanstaltninger over for kunder eller myndigheder.

Du kan også køre dit eget projekt gennem værktøjer som "Google Fonts Checker" eller DevTools med jævne mellemrum - f.eks. en gang i kvartalet. Det sikrer, at ingen nyinstallerede plugins eller scripts etablerer eksterne forbindelser til Google. Dette er en anbefalet praksis, især for større hjemmesider med mange deltagere.

Konklusion: Brug Google Fonts sikkert

Hvem Integrer Google Fonts lokaltbeskytter besøgendes data, optimerer indlæsningshastigheden og forhindrer juridiske konsekvenser. Overgangen er relativt enkel med værktøjer som OMGF eller via CSS-tilpasning. Jeg anbefaler en kombination af plugin-brug og manuel finjustering - det skaber en ren, kontrolleret skrifttypeintegration. Hvis du tjekker regelmæssigt, sørger for opdateringer og bruger passende hosting-support, vil du være på den sikre side med hensyn til databeskyttelse.

Aktuelle artikler