Selvhostede webfonte: hurtigere og uden tredjelandsoverførsel

Kort svar: Selvhostede webfonte betyder, at fontfilerne ligger på dit eget webhotel i stedet for at blive hentet fra Googles eller andres servere ved hvert besøg. Gevinsten er dobbelt: de besøgendes IP-adresser sendes ikke til en tredjepart, og siden bliver ofte hurtigere, fordi en ekstern forbindelse forsvinder. Opskriften: hent kun de varianter, du bruger, i WOFF2, læg dem lokalt, indlæs dem med font-display: swap og preload den primære – eller lad dit tema eller performance-plugin gøre arbejdet. Verificér bagefter i netværksfanen, at fonts.googleapis.com og fonts.gstatic.com er helt væk.

Fagligt gennemgået: 2. oktober 2026

Hvor guiden om Google Fonts og persondata forklarer, hvorfor eksterne fonte kan være et problem, er denne guide den praktiske hvordan: fra dynamisk indlæsning hos Google til lokalt hostede filer – med hastighedsgevinsten høstet undervejs.

Øvelsen tager typisk under en time på et almindeligt WordPress-site. Det meste af tiden går med at finde ud af, hvor fontene bliver indlæst fra.

Før du ændrer noget: Tag en backup eller arbejd på staging, og notér de nuværende fontindstillinger i tema og page builder. Så kan du hurtigt rulle tilbage, hvis en overskrift pludselig skifter udseende.

1. Kortlæg dine fonte

Åbn browserens udviklerværktøjer, gå til netværksfanen, filtrér på „Font“, og genindlæs siden. Nu kan du se, hvad sitet faktisk henter: hvilke familier, vægte og stilarter – og hvorfra.

Et typisk fund er, at temaet indlæser to familier i fire vægte hver, mens designet reelt bruger én brødtekstfont i to vægte plus én overskriftsfont. Hver vægt og stil er en separat fil, og hver fil koster indlæsningstid.

Beslut den mindste palette, designet kan leve med, og notér, hvor indlæsningen sker:

• temaets typografiindstillinger
• page builderens globale typografiindstillinger (fx i Breakdance eller Bricks Builder)
• plugins med egne fonte: booking, formularer, kort, cookiebannere og sliders
• gamle snippets i headeren eller i et child theme

2. Den nemme vej: tema og plugins

Mange moderne temaer og page buildere kan hoste Google-fonte lokalt med en enkelt indstilling. Performance-plugins som LiteSpeed Cache og FlyingPress har også funktioner, der kan hente og omskrive fontindlæsningen automatisk. På sites uden de muligheder findes der små, dedikerede plugins, der gør det samme.

Tjek altid efter aktivering, at der ikke stadig sniger sig eksterne kald ind fra enkelte plugins. Booking-, formular- og kortplugins er klassikere. De skal enten indstilles til at bruge lokale fonte eller arve sitets typografi.

3. Den manuelle vej: filer og CSS

Uden hjælpeværktøjer gør du sådan:

1. Hent fontene. Værktøjer af typen google-webfonts-helper pakker familier som WOFF2 med færdig CSS – eller hent dem fra fontens officielle kilde. Tjek licensen til webbrug, se billeder, fonte og ophavsret.
2. Upload filerne til en mappe på webhotellet, fx /wp-content/fonts/, via SFTP eller filhåndteringen.
3. Tilføj @font-face-regler i dit child themes CSS eller i builderens globale CSS med korrekt sti og font-display: swap.
4. Fjern den gamle eksterne indlæsning – link-tagget, @import-linjen eller temaindstillingen.

Et eksempel på en regel for én vægt:

@font-face {
  font-family: "Inter";
  src: url("/wp-content/fonts/inter-v12-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

WOFF2 alene rækker til alle moderne browsere. Ældre formater som TTF og EOT er unødig vægt i dag.

Variable fonte

Bruger du mange vægte af samme familie, kan en variabel font være en fordel: én fil dækker et helt spænd af vægte. Filen er større end en enkelt statisk vægt, men ofte mindre end tre-fire statiske filer tilsammen. Mål det på dit eget site, før du vælger.

4. Performance: swap, preload og subset

Tre håndtag gør lokale fonte effektive:

• font-display: swap viser teksten med en systemfont, til webfonten er klar. Der er ingen usynlig tekst, mens filen hentes.
• Preload af den primære brødtekstfont får browseren til at hente den tidligt. Brug den kun til én eller to filer – preload af alt modarbejder formålet.
• Subsetting – kun de tegn, du bruger, fx latin inklusive æ, ø og å – gør filerne mindre.

En preload-linje i headeren ser sådan ud. Bemærk crossorigin, som er nødvendig for fonte, også når filen ligger på dit eget domæne – ellers hentes filen to gange:

<link rel="preload" href="/wp-content/fonts/inter-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Skiftet fra systemfont til webfont kan give et lille layouthop. Det kan dæmpes med en fallback-font, der har tilsvarende mål, eller med CSS-egenskaber som size-adjust. Hele mekanikken bag CLS og FOUT står i webfonts uden CLS og FOUT, og prioriteringen er forklaret i preload, preconnect og fetchpriority.

Husk også at fjerne gamle preconnect-linjer til fonts.googleapis.com og fonts.gstatic.com, når fontene er flyttet hjem. De opretter ellers forbindelser til servere, du ikke længere bruger.

5. Verificér resultatet

Når fontene er flyttet, så verificér det:

1. Åbn sitet i et privat vindue.
2. Åbn netværksfanen, filtrér på „Font“, og genindlæs.
3. Bekræft, at alle fontforespørgsler går til dit eget domæne.
4. Gentag på forsiden, en artikel, en produktside, checkout og en side med formular.
5. Søg i sidens kildekode efter „fonts.googleapis“ og „fonts.gstatic“ for at fange preconnect- og import-linjer.

Kør gerne en hastighedsmåling før og efter, så gevinsten er dokumenteret. Se PageSpeed, GTmetrix og Pingdom for, hvordan du sammenligner målingerne fair.

6. Fang tilbagefaldene

Fonte ændrer sig sjældent, men nye temaer, plugins og builder-skabeloner kan genindføre eksterne fontkald uden varsel. Sæt derfor fonttjekket på listen over faste kontroller efter større opdateringer og i det kvartalsvise lovkravstjek. Når du ved, hvor du skal kigge, tager det et halvt minut.

Vil du være helt sikker, kan en Content Security Policy med en stram font-src blokere eksterne fontkilder helt. Så bliver en genganger højst til en fejl i browserens konsol – ikke til et kald til en tredjepart. Start med en CSP i rapporteringstilstand, så du ikke ødelægger noget, se sikkerhedsheadere i WordPress.

Hvad du vinder

Gevinsten ved at tage fontene hjem er både juridisk og teknisk. Du undgår, at besøgendes IP-adresser sendes til en tredjepart for at hente fonte, du sparer et DNS-opslag og en ekstra forbindelse, og du får fuld kontrol over caching og indlæsningsrækkefølge. På LiteSpeed-hosting hos Hostious serveres de lokale filer fra samme server som resten af sitet.

Læs også

• Hub: Datasuverænitet
• Google Fonts, CDN’er og persondata
• Webfonts uden CLS og FOUT
• Preload, preconnect og fetchpriority
• WordPress hosting hos Hostious – LiteSpeed, NVMe og servere i Europa

Ofte stillede spørgsmål om selvhostede fonte

Må jeg hoste Google Fonts selv?

Ja. Fontene på Google Fonts er udgivet under åbne licenser, typisk SIL Open Font License, der tillader selvhosting. Tjek licensen hos andre fontleverandører – nogle kommercielle webfontlicenser er bundet til bestemte indlæsningsmetoder eller antal visninger.

Hvilket filformat skal jeg bruge?

WOFF2 alene. Det understøttes af alle moderne browsere og giver de mindste filer. Ældre formater som TTF og EOT er unødig vægt i dag.

Bliver siden langsommere af lokale fonte?

Normalt ikke – tværtimod. Du sparer en ekstern forbindelse og får kontrol over caching, og med swap, preload og subsetting bliver indlæsningen typisk hurtigere og mere stabil. Mål før og efter på dit eget site.

Hvorfor ser jeg stadig kald til fonts.gstatic.com?

Typisk fordi et plugin, en builder-skabelon eller en gammel preconnect-linje stadig henter fonte eksternt. Find kilden via netværksfanens „Initiator“-kolonne, og indstil pluginnet til lokale fonte eller fjern linjen.