Har du kört din sajt genom GTmetrix och fått fel på Google Fonts? Du är inte ensam. Externa anrop till fonts.googleapis.com saktar ner laddningen, och cache-plugins som WP Rocket eller WP Fastest Cache kan inte komprimera resurser som ligger på någon annans server.

Sedan 2022 finns det ytterligare ett skäl: en tysk domstol slog fast att dynamisk inläsning av Google Fonts bryter mot GDPR eftersom besökarnas IP-adresser överförs till Googles servrar i USA utan samtycke. Att själv hosta typsnitten löser tre problem på en gång: GTmetrix-prestanda, GDPR-efterlevnad och full kontroll över cachelagring.

Här är en steg-för-steg-guide. Från att välja ett typsnitt på Google Fonts till en ren GTmetrix-rapport utan några externa resursfel.

💡 Snabb översikt:

• Ladda ner de teckensnittsvikter du behöver från Google Fonts
• Konvertera.ttf till WOFF2 med Transfonter eller google-webfonts-helper
• Ladda upp filerna till /wp-content/uploads/fonts/ via FTP
• Lägg till @font-face-regler i ditt temas CSS och verifiera renderingen
• Testa sajten igen i GTmetrix; felen för Google Fonts bör vara borta

Varför du bör hosta typsnitt lokalt

När en webbläsare laddar en sida går den till fonts.googleapis.com, hämtar CSS:en och drar sedan de faktiska typsnittsfilerna från fonts.gstatic.com. Det är minst två externa DNS-uppslag och två HTTP-sessioner som du inte har någon kontroll över. Cache-plugins är maktlösa här: du kan inte komprimera eller skjuta upp laddningen av en extern resurs.

Lokal hosting förändrar bilden. Typsnittsfilerna ligger på din server, samma domän, samma CDN, samma cacheregler. Webbläsaren går inte någonstans externt, och GTmetrix och PageSpeed Insights slutar klaga på tredjepartsresurser.

Och ja, GDPR. I januari 2022 slog Münchens regionala domstol fast att dynamisk inläsning av Google Fonts utan användarens samtycke bryter mot GDPR. En våg av stämningar svepte över Europa, och sajtägare började massivt gå över till lokal hosting. Att hosta typsnitten själv är den mest pålitliga lösningen.

Steg 1. Välj ett typsnitt på Google Fonts

Gå till Google Fonts och hitta det typsnitt du behöver. I den här guiden använder jag Roboto, ett av de mest populära webbtypsnitten, med stöd för kyrilliska tecken.

Två regler för att hålla det slankt:

• Minsta antal vikter. Varje vikt (regular, bold, italic) är en separat fil och en separat förfrågan. Om din design bara använder regular och bold, avmarkera resten.
• Minsta antal typsnitt. Håll dig till ett eller två typsnitt per sajt. Ett tredje är redan overkill för prestandan, oavsett hur vackert det ser ut.

Jag valde Roboto Regular (400) och Roboto Bold (700). Det är allt.

Steg 2. Ladda ner typsnittet

På typsnittssidan klickar du på knappen "Download family". Google paketerar alla vikter i ett ZIP-arkiv. Viktvalet spelar ingen roll i det här skedet; arkivet innehåller ändå hela familjen. Vi filtrerar senare.

Packa upp arkivet. Vi behöver Roboto-Regular.ttf och Roboto-Bold.ttf.

Steg 3. Konvertera typsnitt till webbformat

Webbläsare använder inte.ttf direkt. Du behöver formaten WOFF och WOFF2; de är komprimerade och laddar snabbare. Det finns två verktyg, båda gratis.

Transfonter är en klassiker: gå till transfonter.org, klicka på "Add fonts" och ladda upp dina.ttf-filer.

Låt inställningarna stå kvar på standard; WOFF och WOFF2 täcker alla moderna webbläsare. EOT (för gamla Internet Explorer) behövs inte 2026. Klicka på "Convert."

Google-webfonts-helper är ett modernare alternativ specifikt för Google Fonts. Tjänsten på gwfh.mranftl.com genererar både WOFF2-filer och färdig CSS med @font-face. Inget behov av att ladda upp typsnitt till en tredjepartsserver; allt sker lokalt i din webbläsare. För licensierade typsnitt och varumärkesskyddade teckensnitt spelar detta roll.

Vilket verktyg ska du välja? Transfonter är enklare för en engångsuppgift. Google-webfonts-helper är smidigare om du byter typsnitt ofta eller arbetar med kommersiella teckensnitt som du helst inte laddar upp till externa servrar.

Steg 4. Ladda upp webbtypsnitt till din server

Efter konverteringen laddar du ner ZIP-filen. Inuti hittar du.woff- och.woff2-filer för varje vikt. För Roboto Regular och Bold får du 4 filer:

Ladda upp dem via FTP eller din hosting-filhanterare till /wp-content/uploads/fonts/. Sökvägen /wp-content/uploads/ är vald medvetet: kärn- och temauppdateringar rör den inte, till skillnad från temamappen.

Efter uppladdning, verifiera genom att öppna en direktlänk till filen i din webbläsare:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Webbläsaren ska börja ladda ner. Om inte, kontrollera mapprättigheterna (bör vara 755) och själva sökvägen.

Steg 5. Lägg till @font-face i din CSS

ZIP-arkivet från Transfonter innehåller en stylesheet.css-fil, en färdig mall för att ansluta typsnittet. Öppna den och kopiera innehållet.

Klistra in koden allra högst upp i ditt aktiva temas style.css (eller custom.css om ditt tema stöder det). Använd sökvägar till filer på din liveserver, inte från arkivet. Ersätt relativa URL:er med absoluta:

Ursprunglig kod från stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Ändra till:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Ersätt your-site.com med din domän. Upprepa för varje vikt.

För att göra typsnittet enkelt att använda i din markup, lägg till wrapper-klasser nedan:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Nu kommer alla element med klassen roboto_font eller roboto_bold_font att visas i Roboto.

Steg 6. Verifiera renderingen

Skapa en testsida (eller öppna en befintlig i utkastläge) och klistra in denna HTML i textredigeraren:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Öppna förhandsgranskningen. Den första rubriken använder temats standardtypsnitt; den andra och tredje använder Roboto.

Om typsnittet inte laddas, öppna webbläsarens konsol (F12 → Nätverk) och kontrollera att WOFF2-filerna laddas från din domän, inte från fonts.gstatic.com. Svarskoden ska vara 200 och typen ska vara font/woff2.

Steg 7. Gör typsnittet till standard

För att använda Roboto på hela webbplatsen utan att lägga till klasser på varje rubrik, lägg till detta i style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Obs: om ditt tema redan använder ett anpassat typsnitt, leta reda på raderna med font-family i style.css och ersätt dem. Att bara lägga till en body-regel ovanpå en befintlig skapar en konflikt. Se till att gamla deklarationer tas bort eller kommenteras ut.

Steg 8. Sätt upp en reservtypsnittsstack

Google Fonts är inte systemtypsnitt. Om webbläsaren inte kan ladda dem (besökaren är offline, använder annonsblockerare, tillfälligt fel) blir sidan utan text. Lösningen är en typsnittsstack.

Fel:

1
font-family: 'Roboto';

Rätt, med reserver:

1
font-family: 'Roboto', Arial, sans-serif;

Webbläsaren försöker med Roboto. Om det misslyckas faller den tillbaka på Arial. Ingen Arial? Systemets sans-serif. Sidan är alltid läsbar, även om det anpassade typsnittet inte laddas.

Steg 9. Testa din webbplats igen i GTmetrix

Kör GTmetrix igen. Avsnittet "Vattenfall" ska inte längre visa förfrågningar till fonts.googleapis.com eller fonts.gstatic.com. Felet "Serve static assets with an efficient cache policy" för typsnitt försvinner också eftersom de filerna nu finns på din server och cachelagras enligt dina regler.

Om fel kvarstår, kontrollera fliken Vattenfall. Ett tema eller tillägg (till exempel Elementor) kan fortfarande hämta typsnitt från Googles CDN. Nästa avsnitt hjälper dig med det.

Alternativ för den late: tillägget Local Google Fonts

Om du inte vill hantera FTP och CSS finns tillägget Local Google Fonts. Det hittar automatiskt alla Google Fonts som används av ditt tema och dina tillägg, laddar ner dem och levererar dem från din server.

Fördelar: installera, aktivera, glöm. Nackdelar: det fungerar bara med Google Fonts (inte andra externa typsnitt) och erbjuder ingen detaljerad kontroll över format. För de flesta WordPress-webbplatser är det mer än tillräckligt.

Hjälpsam video om ämnet

På engelska med en visuell demonstration av varje steg, från att välja ett typsnitt till den slutliga CSS:en:

⁉️🤔 Vanliga frågor

Är det obligatoriskt att self-hosta typsnitt 2026?

Juridiskt sett, ja, om du har besökare från EU. Münchendomstolen skapade ett prejudikat 2022, och sedan dess har dussintals tyska domstolar bekräftat: dynamisk inläsning av Google Fonts utan samtycke = GDPR-överträdelse. Prestandamässigt är det också ett ja: två extra DNS-uppslag och en extern resurs som inte kan cachas gör inte din sajt snabbare. Att self-hosta typsnitt löser båda problemen på en gång. Pluginet Local Google Fonts tar 5 minuter; den manuella metoden med Transfonter tar 15. Välj utifrån din vilja att använda FTP.

Google-webfonts-helper eller Transfonter: vilket är bättre?

För en engångsanslutning av ett enda typsnitt är det nästan ingen skillnad. Transfonter är enklare: ladda upp.ttf-filen, få WOFF2 och CSS. Google-webfonts-helper är smidigare när du byter typsnitt ofta: det laddar inte upp filer till en tredjepartsserver och genererar direkt färdig @font-face med korrekta sökvägar. För kommersiellt licensierade typsnitt, endast google-webfonts-helper.

Vad gör jag om typsnitten inte visas efter lokal uppladdning?

Tre typiska orsaker. För det första, fel sökväg i url(): kontrollera att länken öppnas i en webbläsare och returnerar en fil, inte en 404. För det andra, CORS: om typsnitt laddas från en CDN eller subdomän måste servern returnera headern Access-Control-Allow-Origin. För det tredje, temakonflikt: öppna DevTools (F12 → Computed), hitta ett element med ditt typsnitt och se vilken font-family som faktiskt tillämpas. Ofta åsidosätter temat det längre ner i kaskaden.

Kan jag hosta typsnitt på en CDN istället för min egen server?

Ja, men CDN:en måste vara din egen. Huvudprincipen är att typsnitt ska serveras från samma domän (eller subdomän) som din sajt, utan korsdomänförfrågningar till tredjepartsservrar. Då fungerar cachning, och GDPR överträds inte.

Hur verifierar jag att typsnitten faktiskt laddas lokalt?

Öppna DevTools → Nätverk → Typsnittsfliken. Ladda om sidan. Alla typsnittsförfrågningar ska gå till din domän. Om du ser fonts.googleapis.com eller fonts.gstatic.com finns extern inläsning kvar någonstans. Troligtvis använder ett tema eller plugin det fortfarande. Kontrollera inställningarna eller installera Local Google Fonts.

Vad du ska välja: manuell uppladdning eller plugin

Om du har läst så här långt bryr du dig förmodligen om din sajts prestanda. Och det är rätt inställning. Skillnaden mellan "verkar snabb" och "GTmetrix Grade A" handlar ofta om små detaljer som externa typsnitt.

För snabba resultat, installera Local Google Fonts. Fem minuter, så försvinner externa anrop till Google.

För full kontroll över format, cachning och fallback-stackar, kör den manuella metoden med Transfonter eller google-webfonts-helper. Samma 15 minuter, men du känner till varje fil på din server.

Oavsett vilket, kör ett GTmetrix-test före och efter. "Före"- och "efter"-skärmdumpar är det bästa sättet att bekräfta att du inte gjorde allt detta i onödan.