Ett webbtypsnitt kan skicka besökarens IP-adress till en extern tjänst och samtidigt lägga onödig vikt på varje sidvisning. Genom att besluta om hosting, filformat och reservtypsnitt tidigt minskar ni integritetsrisker, laddtid och omarbete.
Att ett typsnitt är gratis betyder inte att det är kostnadsfritt för webbplatsen. Den vanliga sökningen Google Fonts GDPR fångar bara en del av problemet: samma fontval kan skapa externa dataflöden, onödig laddning och dyrt designarbete när texter plötsligt bryts annorlunda än i Figma.
En Google-hostad font innebär normalt att besökarens webbläsare hämtar CSS och fontfiler från Googles servrar. En samtyckesbanner hjälper inte om anropet redan har skickats innan besökarens val har behandlats. Samtidigt kan en sent inläst webbfont ändra bredden på rubriker, knappar och menyer, vilket gör en till synes färdig design instabil.
Så här hade vi angripit frågan: välj leveransmodell innan typografin låses, begränsa fontpaketet och prova varje viktig komponent med både webbfont och reservtypsnitt. Då blir beslutet ett verifierbart acceptanskriterium i stället för en teknisk överraskning strax före lansering.
Google Fonts GDPR: extern laddning, lokal hosting eller systemtypsnitt?
Det raka svaret är att inget alternativ passar alla sajter. Extern laddning är enkel att lägga in, lokal hosting ger större kontroll och systemtypsnitt tar bort fontnedladdningen helt. Rätt val beror på hur starkt varumärket är knutet till typografin, hur mycket variation layouten tål och vem som ska förvalta lösningen.
Vid extern laddning kontaktar webbläsaren normalt en tredje part för att hämta stilmallar och filer. Det skapar ett tekniskt beroende och kan innebära att uppgifter från anropet överförs utanför er egen miljö. Fördelen är enkel distribution, men den väger sällan tungt om samma visuella resultat kan uppnås utan det externa anropet.
Att hosta Google Fonts lokalt innebär att WOFF2-filerna levereras från den egna domänen eller en kontrollerad leveransmiljö. Ni får bättre kontroll över nätverksflödet, men tar också ansvar för licensvillkor, filversioner, cachehantering och vilka vikter som används. Lokal hosting är därför en förvaltningsmodell, inte bara en flytt av filer.
Systemtypsnitt som system-ui, Segoe UI och plattformarnas inbyggda sans-serif-fonter kräver ingen fontnedladdning. Sidan blir robust, men uttrycket varierar mellan Windows, macOS, Android och iOS. Det kan vara ett klokt val för innehållstunga företagssajter där läsbarhet och enkel förvaltning väger tyngre än identisk typografi på varje enhet.
| Alternativ | Dataflöde | Prestanda | Förvaltning |
|---|---|---|---|
| Google-hostad font | Webbläsaren kontaktar externa domäner | Kan kräva extra anslutningar | Tredjepartsberoende kvarstår |
| Lokalt hostad font | Kan hållas inom kontrollerad miljö | Beror på filurval och laddningsstrategi | Ni ansvarar för filer och licensinformation |
| Systemtypsnitt | Ingen fontfil behöver hämtas | Mycket liten leveranskostnad | Liten teknisk förvaltning men större visuell variation |
Den juridiska bedömningen måste alltid utgå från er faktiska lösning och övriga tredjepartstjänster. Detta är inte juridisk rådgivning. Använd aktuell vägledning från Integritetsskyddsmyndigheten, IMY, för frågor om personuppgiftsbehandling.
Lokal hosting är inte automatiskt snabb
En WOFF2-fil på den egna domänen kan fortfarande vara en prestandaskuld. Om sajten laddar flera familjer, kursiver, variabla axlar och vikter som aldrig syns i gränssnittet har kostnaden bara flyttats från Google till den egna servern. Filerna konkurrerar då med bilder, JavaScript och annat innehåll som besökaren faktiskt väntar på.
Utgå från designens verkliga behov. Om brödtexten använder normal stil och rubrikerna två vikter finns sällan skäl att leverera hela fontfamiljen. En avskalad deklaration kan exempelvis se ut så här:
@font-face {
font-family: "Profil Sans";
src: url("/fonts/profil-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}font-display: swap låter ett reservtypsnitt visas medan webbfonten hämtas, så att texten inte behöver förbli osynlig under väntan. Bytet kan däremot flytta layouten om fonterna har olika mått. Sådana oväntade förskjutningar påverkar CLS, det Core Web Vitals-mått som enligt Googles web.dev beskriver visuell stabilitet.
CSS-deskriptorerna size-adjust, ascent-override, descent-override och line-gap-override kan användas för att få reservfontens mått att bättre motsvara profilfonten. Värdena ska tas fram genom jämförelse av de aktuella fonterna, inte kopieras från ett generellt exempel. Målet är att rubriker och komponenter ska behålla ungefär samma form före och efter fontbytet.
Förladdning kräver samma återhållsamhet. Preloada bara en font som säkert behövs i det första synliga innehållet, och låt URL, format och crossorigin-inställning motsvara deklarationen i @font-face. Annars kan webbläsaren prioritera fel fil eller hämta samma resurs igen, vilket motverkar hela optimeringen.
Det första vi tittar på efter en flytt är webbläsarens Network-panel. Filtrera på fonter och kontrollera att inga anrop går till fonts.googleapis.com, fonts.gstatic.com eller en bortglömd leverantör. Kontrollera samtidigt att varje laddad vikt används; lokalt hostade typsnitt blir effektiva först när leveransen är avsiktlig.
Lås typografins toleranser innan designen blir dyr att ändra
Vad händer med en navigation när reservfonten är bredare än profilfonten? En länk kan brytas, en knapptext kan kapas och en huvudrubrik kan ta en extra rad. Det leder inte bara till ett visuellt fel utan även till ombyggnad av komponenter, nya designbeslut och mer testning sent i projektet.
Testunderlaget bör innehålla företagets verkliga menytexter, längsta knappetiketter och svenska ord med å, ä och ö. Prova också formulär, felmeddelanden och rubriker vid smala skärmbredder. Ett enkelt acceptansunderlag kan se ut så här:
| Komponent | Exempeltext | Kontroll med webbfont | Kontroll med reservfont |
|---|---|---|---|
| Huvudrubrik | Förändring som märks i vardagen | Radbrytning och rubrikhöjd | Ingen överlappning eller kapad text |
| Navigation | Hållbarhetsredovisning | Avstånd mellan länkar | Fungerar utan oavsiktlig brytning |
| Knapp | Boka en kostnadsfri genomgång | Text och horisontell luft | Texten ryms i komponenten |
| Formulärfält | Företagets e-postadress | Etikettens placering | Ingen förändrad komponenthöjd |
| Brödtext | Våra tjänster är anpassade för små och växande företag. | Läsbarhet och rytm | Å, ä och ö visas korrekt |
Leveransen bör dessutom dokumentera fontkälla, licensinformation, filformat, använda vikter, fallback-stack och ansvarig för framtida uppdateringar. Dokumentationen hindrar inte alla fel, men minskar risken att en senare byrå återinför externa anrop eller laddar hela familjen för att återskapa designen.
En användbar kompromiss är ofta en lokalt hostad profilfont för ett begränsat antal rubriker och ett systemtypsnitt för brödtext och gränssnitt. Varumärket behåller sin karaktär där den märks mest, medan majoriteten av texten förblir snabb och robust. Beslutet bör dock styras av testade komponenter, inte av hur ett isolerat typografiprov ser ut.
De kriterier som avgör ert fontval
Bedöm inte typsnitt enbart efter uttryck eller filplacering. Ett hållbart val begränsar externa anrop, håller nere prestandakostnaden och ger designen tydliga toleranser för olika enheter och laddningslägen.
Kartlägg vilka externa anrop fontvalet skapar
Kontrollera om webbläsaren behöver kontakta Google eller någon annan tredje part för CSS och fontfiler. Lokal hosting och systemtypsnitt ger normalt större teknisk kontroll, men den juridiska bedömningen måste göras utifrån er egen lösning.
Signal: Inga oväntade fontanrop ska gå till externa domäner i nätverkspanelen.
Banta fontpaketet till det gränssnittet faktiskt använder
Inventera familjer, vikter, stilar och teckenuppsättningar innan filerna paketeras. Delmängder kan minska överföringen, men först efter att svenska tecken, specialtecken och verksamhetens övriga språk har kontrollerats.
Signal: Varna om varje sida laddar ett helt fontbibliotek trots att designen använder få varianter.
Styr när och hur fonterna laddas
Prioritera bara filer som behövs för det första synliga innehållet. Besökaren ska kunna läsa och använda sidan även när webbfonten laddas långsamt eller blockeras.
Signal: Varje förladdad font ska ha ett tydligt skäl och reservläget ska fungera utan stora hopp.
Lås typografins toleranser innan designen byggs fast
Definiera reservtypsnitt, tillåtna radbrytningar och komponenthöjder innan typografin sprids genom designsystemet. Profilfonten får inte vara den enda situation där navigation, formulär och knappar fungerar.
Signal: Ingen text ska överlappa, kapas eller göra en central funktion oanvändbar med reservtypsnitt.
Välj en lösning som teamet kan förvalta
Lokal hosting flyttar ansvar till er för filversioner, cache, licensinformation och uppdateringar. Extern laddning lämnar i stället kvar ett tredjepartsberoende som behöver granskas när teknik eller design förändras.
Signal: Någon ska kunna ange filernas källa, användning och ansvarig för framtida ändringar.
Börja här: ta kontroll över typsnitten
-
Kartlägg alla externa fontanrop
Öppna Chrome DevTools, välj Network och filtrera på
Font,fonts.googleapis.comochfonts.gstatic.com. Kontrollera flera sidtyper och komplettera gärna med Webbkoll. I WordPress kan anrop komma från teman och tillägg; i React kan de ligga i globala stilmallar eller komponentpaket. -
Flytta Google Fonts till egen drift
Hämta rätt fontfiler och licensinformation via Google Fonts officiella repository eller paketera dem med Fontsource. Leverera WOFF2 från den egna domänen eller ett kontrollerat CDN, lägg in lokala
@font-face-regler och ta bort gamla länkar,@import-regler ochpreconnect-anrop till Google. -
Begränsa antalet vikter och tecken
Behåll bara de vikter och stilar som faktiskt används. Vid större fontpaket kan FontTools-kommandot
pyftsubseteller Glyphhanger skapa språkbaserade delmängder, men testa alltid svenska tecken, symboler och samtliga publiceringsspråk innan de tas i drift. -
Gör fontladdningen icke-blockerande
Använd
font-display: swap, ange en robust fallback-stack och förladda bara filer som säkert behövs direkt. Justera vid behov reservfontens mått medsize-adjustoch relaterade deskriptorer så att snabb synlig text inte köps till priset av en hoppig layout. -
Verifiera och bevaka resultatet
Testa representativa sidor med kall cache och simulerad långsammare anslutning i Lighthouse, PageSpeed Insights och WebPageTest. Kombinera sedan Lighthouse CI eller motsvarande med en kontroll av tillåtna domäner, så att externa fontanrop och försämrad webbtypsnittsprestanda upptäcks före publicering.
Frågan Google Fonts GDPR bör alltså mynna ut i ett konkret leveranskrav: kända dataflöden, dokumenterad fontkälla, begränsade filer och ett testat reservläge. Egen drift ger bättre kontroll men är inte i sig en garanti för regelefterlevnad; detta är inte juridisk rådgivning, och den rättsliga bedömningen bör utgå från IMY:s vägledning på imy.se. Ett erfaret team börjar därför i nätverksflödet och komponenttesterna, inte i ett löfte om att en viss fontlösning alltid är säker eller snabb.
