Kjørte du nettstedet ditt gjennom GTmetrix og fikk Google Fonts-feil? Du er ikke alene. Eksterne forespørsler til fonts.googleapis.com bremser innlastingen, og hurtigbuffer-plugins som WP Rocket eller WP Fastest Cache kan ikke komprimere ressurser som ligger på en annens server.

Siden 2022 er det en grunn til: en tysk domstol slo fast at dynamisk innlasting av Google Fonts bryter GDPR fordi de besøkendes IP-adresser overføres til Googles servere i USA uten samtykke. Selvhosting av fonter løser tre problemer samtidig: GTmetrix-ytelse, GDPR-etterlevelse og full kontroll over hurtigbufring.

Nedenfor følger en steg-for-steg-guide. Fra valg av font på Google Fonts til en ren GTmetrix-rapport uten feil på eksterne ressurser.

💡 Hurtigoversikt:

• Last ned fontvektene du trenger fra Google Fonts
• Konverter.ttf til WOFF2 med Transfonter eller google-webfonts-helper
• Last opp filene til /wp-content/uploads/fonts/ via FTP
• Legg til @font-face-regler i temaets CSS og kontroller at de rendres riktig
• Test nettstedet på nytt i GTmetrix; Google Fonts-feilene skal være borte

Hvorfor du bør hoste fonter lokalt

Når en nettleser laster en side, går den til fonts.googleapis.com, henter CSS-en og drar deretter de faktiske fontfilene fra fonts.gstatic.com. Det er minst to eksterne DNS-oppslag og to HTTP-økter du ikke har kontroll over. Hurtigbuffer-plugins er maktesløse her: du kan ikke komprimere eller utsette innlasting av en ekstern ressurs.

Lokal hosting endrer bildet. Fontfilene ligger på din server, samme domene, samme CDN, samme regler for hurtigbufring. Nettleseren går ingen eksterne steder, og GTmetrix og PageSpeed Insights slutter å klage på tredjepartsressurser.

Og ja, GDPR. I januar 2022 slo Münchens regionale domstol fast at dynamisk innlasting av Google Fonts uten brukerens samtykke bryter GDPR. En bølge av søksmål feide over Europa, og nettstedeiere begynte å bytte til lokal hosting i stor skala. Å hoste fonter selv er den mest pålitelige løsningen.

Steg 1. Velg en font på Google Fonts

Gå til Google Fonts og finn fonten du trenger. I denne guiden bruker jeg Roboto, en av de mest populære webfontene, med støtte for kyrillisk.

To regler for å holde seg slank:

• Minimum vekter. Hver vekt (regular, bold, italic) er en separat fil og en separat forespørsel. Hvis designet ditt bare bruker regular og bold, fjern avhukingen for resten.
• Minimum fonter. Hold deg til én eller to fonter per nettsted. En tredje er allerede overkill for ytelsen, uansett hvor vakker den ser ut.

Jeg valgte Roboto Regular (400) og Roboto Bold (700). Det er alt.

Steg 2. Last ned fonten

På fontsiden klikker du på «Download family»-knappen. Google pakker alle vektene i et ZIP-arkiv. Vektutvalget spiller ingen rolle på dette stadiet; arkivet inneholder uansett hele familien. Vi filtrerer senere.

Pakk ut arkivet. Vi trenger Roboto-Regular.ttf og Roboto-Bold.ttf.

Steg 3. Konverter fonter til webformater

Nettlesere bruker ikke.ttf direkte. Du trenger formatene WOFF og WOFF2; de er komprimert og laster raskere. Det finnes to verktøy, begge gratis.

Transfonter er en klassiker: gå til transfonter.org, klikk «Add fonts» og last opp.ttf-filene dine.

La innstillingene stå på standard; WOFF og WOFF2 dekker alle moderne nettlesere. EOT (for gammel Internet Explorer) er ikke nødvendig i 2026. Klikk «Convert».

Google-webfonts-helper er et mer moderne alternativ spesielt for Google Fonts. Tjenesten på gwfh.mranftl.com genererer både WOFF2-filer og ferdig CSS med @font-face. Du trenger ikke laste opp fonter til en tredjepartsserver; alt skjer lokalt i nettleseren din. For lisensierte fonter og branded typografi er dette viktig.

Hvilket verktøy bør du velge? Transfonter er enklere for en engangsoppgave. Google-webfonts-helper er mer praktisk hvis du bytter fonter ofte eller jobber med kommersielle skrifttyper du helst ikke vil laste opp til eksterne servere.

Steg 4. Last opp webfonter til serveren din

Etter konvertering laster du ned ZIP-filen. Inni finner du.woff- og.woff2-filer for hver vekt. For Roboto Regular og Bold får du 4 filer:

Last dem opp via FTP eller hostingens filbehandler til /wp-content/uploads/fonts/. Stien /wp-content/uploads/ er valgt med hensikt: kjerne- og temaoppdateringer rører den ikke, i motsetning til temamappen.

Etter opplasting, verifiser ved å åpne en direkte lenke til filen i nettleseren din:

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

Nettleseren skal begynne å laste ned. Hvis ikke, sjekk mappetillatelser (skal være 755) og selve stien.

Steg 5. Legg til @font-face i CSS-en din

ZIP-arkivet fra Transfonter inkluderer en stylesheet.css-fil, en ferdig mal for å koble til fonten. Åpne den og kopier innholdet.

Lim inn koden helt øverst i det aktive temaets style.css (eller custom.css hvis temaet ditt støtter det). Bruk stier til filer på din live-server, ikke fra arkivet. Erstatt relative URL-er med absolutte:

Opprinnelig kode fra stylesheet.css:

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

Endre til:

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');

Bytt ut your-site.com med ditt domene. Gjenta for hver vekt.

For å gjøre fonten enkel å bruke i markeringen din, legg til wrapper-klasser nedenfor:

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
}

Nå vil ethvert element med klassen roboto_font eller roboto_bold_font vises i Roboto.

Steg 6. Verifiser renderingen

Opprett en testside (eller åpne en eksisterende i kladdmodus) og lim inn denne HTML-en i teksteditoren:

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>

Åpne forhåndsvisningen. Den første overskriften bruker temaets standardfont; den andre og tredje bruker Roboto.

Hvis skriften ikke lastes inn, åpner du nettleserkonsollen (F12 → Nettverk) og sjekker at WOFF2-filer lastes fra ditt domene, ikke fra fonts.gstatic.com. Statuskoden skal være 200, og typen skal være font/woff2.

Trinn 7. Gjør skriften til standard

For å bruke Roboto på hele nettstedet uten å legge til klasser på hver overskrift, legg til dette i style.css:

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

Forsiktig: hvis temaet ditt allerede bruker en egendefinert skrift, finn font-family-linjene i style.css og erstatt dem. Å bare legge til en body-regel oppå en eksisterende skaper en konflikt. Sørg for at gamle deklarasjoner fjernes eller kommenteres ut.

Trinn 8. Sett opp en reserverfont-stakk

Google Fonts er ikke systemfonter. Hvis nettleseren ikke kan laste dem (besøkende er offline, annonseblokkering, midlertidig feil), vil siden mangle tekst. Løsningen er en font-stakk.

Feil:

1
font-family: 'Roboto';

Riktig, med reserverfonter:

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

Nettleseren prøver Roboto. Hvis det mislykkes, faller den tilbake til Arial. Ingen Arial? Systemets sans-serif. Siden er alltid lesbar, selv om den egendefinerte skriften ikke lastes.

Trinn 9. Test nettstedet ditt på nytt i GTmetrix

Kjør GTmetrix igjen. «Vannfall»-delen skal ikke lenger vise forespørsler til fonts.googleapis.com eller fonts.gstatic.com. Feilen «Serve static assets with an efficient cache policy» for fonter forsvinner også fordi disse ressursene nå ligger på din server og mellomlagres i henhold til dine regler.

Hvis feil vedvarer, sjekk Vannfall-fanen. Et tema eller en plugin (for eksempel Elementor) kan fortsatt hente fonter fra Googles CDN. Neste avsnitt vil hjelpe.

Alternativ for de late: Local Google Fonts-pluginen

Hvis du ikke vil håndtere FTP og CSS, finnes pluginen Local Google Fonts. Den finner automatisk alle Google Fonts som brukes av temaet og pluginene dine, laster dem ned og serverer dem fra din egen server.

Fordeler: installer, aktiver, glem. Ulemper: den fungerer bare med Google Fonts (ikke andre eksterne fonter) og gir ikke detaljert kontroll over formater. For de fleste WordPress-nettsteder er det mer enn nok.

Nyttig video om temaet

På engelsk med en visuell demonstrasjon av hvert trinn, fra valg av skrift til den endelige CSS-en:

⁉️🤔 Ofte stilte spørsmål

Er selvhosting av fonter obligatorisk i 2026?

Fra et juridisk ståsted, ja, hvis du har besøkende fra EU. Retten i München skapte presedens i 2022, og siden har dusinvis av tyske domstoler bekreftet: dynamisk innlasting av Google Fonts uten samtykke = brudd på GDPR. Fra et ytelsesperspektiv, også ja: to ekstra DNS-oppslag og en ekstern ressurs som ikke kan mellomlagres, gjør ikke nettstedet ditt raskere. Selvhosting av fonter løser begge problemene samtidig. Utvidelsen Local Google Fonts tar 5 minutter; den manuelle metoden med Transfonter tar 15. Velg basert på hvor villig du er til å bruke FTP.

Google-webfonts-helper eller Transfonter: hva er best?

For en engangstilkobling av én enkelt font er det nesten ingen forskjell. Transfonter er enklere: last opp.ttf-filen, få WOFF2 og CSS. Google-webfonts-helper er mer praktisk når du bytter fonter ofte: den laster ikke opp filer til en tredjepartsserver og genererer umiddelbart bruksklar @font-face med korrekte stier. For kommersielt lisensierte fonter, kun google-webfonts-helper.

Hva om fonter ikke vises etter lokal opplasting?

Tre typiske årsaker. For det første, feil sti i url(): sjekk at lenken åpnes i en nettleser og returnerer en fil, ikke en 404. For det andre, CORS: hvis fonter lastes fra et CDN eller underdomene, må serveren returnere headeren Access-Control-Allow-Origin. For det tredje, temakonflikt: åpne DevTools (F12 → Computed), finn et element med fonten din, og se hvilken font-family som faktisk brukes. Ofte overstyrer temaet den lenger ned i kaskaden.

Kan jeg hoste fonter på et CDN i stedet for min egen server?

Ja, men CDN-et må være ditt eget. Hovedprinsippet er at fonter bør serveres fra samme domene (eller underdomene) som nettstedet ditt, uten kryssdomeneforespørsler til tredjepartsservere. Da fungerer mellomlagring, og GDPR brytes ikke.

Hvordan bekrefter jeg at fonter faktisk lastes lokalt?

Åpne DevTools → Nettverk → Font-fanen. Oppdater siden. Alle fontforespørsler skal gå til ditt domene. Hvis du ser fonts.googleapis.com eller fonts.gstatic.com, finnes det fortsatt ekstern innlasting et sted. Mest sannsynlig bruker et tema eller en utvidelse det fortsatt. Sjekk innstillingene eller installer Local Google Fonts.

Hva du bør velge: manuell opplasting eller utvidelse

Hvis du har lest så langt, bryr du deg sannsynligvis om nettstedets ytelse. Og det er riktig holdning. Forskjellen mellom «virker raskt» og «GTmetrix Grade A» kommer ofte ned til små detaljer som eksterne fonter.

For raske resultater, installer Local Google Fonts. Fem minutter, så forsvinner eksterne forespørsler til Google.

For full kontroll over formater, mellomlagring og fallback-stakker, gå for den manuelle metoden med Transfonter eller google-webfonts-helper. Samme 15 minutter, men du kjenner hver fil på serveren din.

Uansett, kjør en GTmetrix-test før og etter. «Før»- og «etter»-skjermbilder er den beste måten å bekrefte at du ikke gjorde alt dette for ingenting.