Sådan gør du din hjemmeside hurtigere med selv-hostede skrifttyper (Self-host fonts)

At selv-hoste skrifttyper betyder, at du lægger de skrifttypefiler, du bruger på din hjemmeside, på dit eget webhotel, server eller CDN, i stedet for at hente dem fra eksterne udbydere som Google Fonts eller Adobe Fonts. Gør du det korrekt, undgår du ekstra DNS-opslag, TLS-håndtryk og forsinkede eksterne kald – hvilket kan reducere load-tiden markant. Det er især relevant for Core Web Vitals, brugeroplevelse og SEO-performance. For at få de bedste resultater bør du kun bruge nødvendige font-vægte, foretrække WOFF2-formatet, preloade kritiske skrifttyper og definere font-display: swap i din CSS.

Mange websites vælger under designfasen Google Fonts, Adobe Fonts eller de skrifttyper, der følger med temaet, uden at tænke over det. Det virker smart, men betyder, at hver besøgende skal bruge tid på domæneopslag, forbindelser og download af skrifttyper fra eksterne kilder. På mobile netværk kan 100-300 ms virke ubetydeligt, men med flere font-familier og vægte bliver det hurtigt til sekunder. Derfor er selv-hostede fonts ikke bare en teknisk detalje – det er en strategi for hurtigere, mere kontrolleret og bæredygtig web performance.

I denne guide gennemgår vi, hvad selv-hosting af skrifttyper gør for din hjemmeside, hvornår det giver fordel, hvordan du implementerer det på WordPress eller specialudviklede sites, og hvilke fejl du bør undgå for at leve op til SEO-standarderne i 2026. Du får også praktiske tips til at planlægge font-optimering på Hostragons, hvor du har et hurtigt og sikkert hosting-miljø. Hosting-valget danner fundamentet; font-optimering er den finjustering, der kan gøre forskellen. Se relevante hosting-muligheder på Hostragons webhosting pakker.

Hvad betyder det at selv-hoste skrifttyper?

At selv-hoste skrifttyper indebærer, at du lægger font-filerne ind i din hjemmesides filstruktur og serverer dem derfra. I stedet for at kalde f.eks. Inter, Roboto eller Montserrat fra Google Fonts, downloader du de relevante WOFF2-filer og lægger dem i f.eks. /fonts eller /assets/fonts. Derefter definerer du dem i din CSS med @font-face. Browseren henter så fonten direkte fra dit eget domæne, uden at skulle ud til tredjepartsudbydere.

Dette giver dig kontrol over formater, cache-tider, hvilke weights du bruger, og hvilke sider de indlæses på. Hvis du kun bruger 400 og 700, behøver du ikke hoste 300, 500, 600, 800 – hvilket både reducerer det samlede filstørrelse og gør CSS mere overskueligt.

Der er tre hovedelementer i en god selv-hostet font-strategi: optimerede font-filer, korrekt CSS-definition og effektiv server-caching. Mangler én af dem, bliver hastighedsgevinsten begrænset. Hvis du f.eks. bruger TTF i stedet for WOFF2, bliver filerne for store. Forkert cache-header betyder, at brugeren henter fonten igen og igen. Preload forkert brugt kan give browseren unødige prioriteter.

Hvorfor er font-optimering vigtigt for SEO?

Google vurderer brugeroplevelsen via både direkte og indirekte signaler. Site-hastighed, mobilvenlighed, interaktionsforsinkelse og visuel stabilitet er centrale parametre. Skrifttyper påvirker Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) og den oplevede load-tid. Hvis din overskrift eller det første indhold vises med en speciel font, kan langsom font-indlæsning forsinke LCP.

I 2026’s SEO-standarder er teknisk tilgængelighed lige så vigtig som indholdskvalitet. Googlebot skal kunne tilgå dine ressourcer, og brugeren skal se en hurtig og stabil side. Problemer med eksterne font-udbydere – som forsinkede forbindelser, lande-specifikke adgangsproblemer eller DNS-issues – er uden for din kontrol. Selv-hostede fonts fjerner denne usikkerhed.

Et konkret eksempel: En virksomhedsside med fire Google Fonts-familier, otte weights og to varianter kan ende med font-requests på 450-700 KB, selv hvis nogle ikke bruges på første skærm. Hvis du i stedet kun bruger to font-familier, tre weights og WOFF2-subset, falder font-størrelsen til 90-180 KB. Det mærkes især på mobil og ældre enheder.

Sammenligning: Ekstern font-service vs. selv-hostede fonts

Der er ikke én løsning, der passer til alle. Nogle projekter kan nøjes med ekstern font-service; andre får bedre resultater med selv-hosting. Tabellen nedenfor giver et hurtigt overblik:

Vil du have kontrol og performance, er selv-hosting stærkest. Men det er ikke bare “download fonten og upload den”. Forkert format, unødige weights eller fejl i CSS kan gøre det hele langsommere.

Hvordan påvirker selv-hostede fonts site-hastigheden?

Fonts er ofte små, men kan være kritiske i load-kæden. Browseren henter HTML, derefter CSS, og finder font-definitions. Hvis din menu, overskrift eller brødtekst bruger en speciel font, kan browseren vente med at vise teksten, til fonten er hentet. Brugeren ser så blankt område, usynlig tekst eller pludselige font-skift.

Tre metrics er vigtige: LCP (hvornår det største indhold vises), CLS (layout-skift pga. font, bredde/højde), og INP (interaktionsrespons, indirekte påvirket af tunge CSS/ressourcer). God font-optimering bør sikre, at fonts på første skærm er under 100 KB, kun nødvendige varianter indlæses, filerne har lang cache, og kritiske fonts preloades.

På en produkt-side bør du f.eks. kun bruge 400 og 700 til overskrift, pris og CTA. Ni weights er spild. For at styrke din shops hastighed, se Løsninger til højtydende hosting.

Optimale font-formater til selv-hosting

Hvorfor er WOFF2 bedst?

WOFF2 er det mest effektive font-format til moderne web. Det giver god komprimering og bred browser-support. TTF/OTF er fine til design/dokumenter, men for store til web. EOT er kun relevant for meget gamle browsere.

Eksempel: Samme font kan være 300 KB som TTF, men 80-120 KB som WOFF2. Har du flere weights, bliver forskellen større. Derfor bør du altid vælge WOFF2 til web-hosting.

Skal du bruge variable font?

Variable fonts samler flere weights og styles i én fil. Hvis du bruger mange weights fra 300 til 800, kan det være smart. Men bruger du kun 400 og 700, er to separate WOFF2-filer tit mindre. Sammenlign filstørrelse, variationer og browser-support før du vælger.

Den erfarne tilgang: List de weights, du faktisk bruger. Sammenlign total KB for statiske og variable. Vælg det, der er mindst, simplest og mest stabilt. Mål før du beslutter – det er lige så vigtigt som det æstetiske.

Sådan selv-hoster du skrifttyper – trin for trin

Disse trin kan bruges på WordPress, custom PHP, Laravel, Node.js eller statiske sites. Logikken: Fjern unødige fonts, optimer de nødvendige, host dem selv og test resultatet.

1. Kortlæg eksisterende font-brug

Start med at se, hvilke fonts du bruger og hvor de kommer fra. Brug Chrome DevTools Network med “font”-filter for at se alle font-kald. PageSpeed Insights, WebPageTest eller Lighthouse viser render-blocking ressourcer og tredjeparts requests. Spørg: Hvor mange font-familier? Hvor mange weights? Fra hvilke domæner? Hvor mange er nødvendige på første skærm?

Ofte kalder temaet én font, page builder en anden, og formular-plugin en tredje. Det kan være usynligt visuelt, men koster performance. Bestem ét typografisystem og minimer antallet af font-familier for størst effekt.

2. Download og trim nødvendige font-filer

Tjek fontens licens. Open source fonts må typisk selv-hostes, men kommercielle fonts kan have fil-hosting, domæne eller visningsbegrænsninger. Når licens er ok, download kun de weights og styles du behøver. For danske sites skal du sikre, at “æ, ø, å” og andre specialtegn er med.

Du kan lave subset – dvs. fjerne tegnsæt du ikke bruger – for at gøre filen mindre. Latin og Latin Extended dækker typisk dansk og engelsk. Hvis du ikke bruger kyrillisk, arabisk eller græsk, fjern dem. Men på flersprogede sider skal du passe på – fejl kan ødelægge tekst. Overvej Guide til domænevalg og flersproget websted hvis du har flere sprog.

3. Læg font-filerne i en ordnet mappe

Gem font-filer i en struktureret mappe, fx /assets/fonts/inter/inter-400.woff2. Tilføj version i filnavnet (fx inter-400-v2.woff2) for nem cache-håndtering. Opdaterer du fonten, undgår du cache-problemer.

Brug hostingens filmanager, FTP eller Git til upload. Fil-permission bør typisk være 644, mappe 755. Font-filer skal være offentligt læsbare – ellers får browseren 403 og bruger system-fonten. Tjek serverens MIME-type: WOFF2 skal have font/woff2.

4. Definer @font-face i CSS

Kernen i selv-hosting er @font-face. Fx: @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }. Lav en separat definition for 700.

Vigtigst: font-display: swap tillader browseren at vise tekst med system-fonten, indtil din font er indlæst. Det reducerer usynlig tekst-problemet. Swap kan give små layout-skift – vælg derfor en fallback font, der ligner din custom font. For Inter kan Arial eller system-ui oftest bruges.

5. Preload kritiske fonts

Preload signalerer til browseren, at en ressource skal indlæses tidligt. Preloader du fonten til overskrift/brødtekst på første skærm, kan LCP forbedres. Men preloader du alle fonts, kan det skade – browseren bruger båndbredde på irrelevante ressourcer og billeder/CSS kan forsinkes.

Tommelregel: Preload kun 1-2 fonts, der bruges på første skærm. Fx body-font 400 og overskrift 700. Brug ikke preload til italics eller fonts, der ikke vises med det samme. Tjek i Network, at fonten faktisk hentes tidligt og ikke hentes dobbelt.

6. Konfigurer cache og komprimering

Fonts ændres sjældent, så brug lang cache-tid. Cache-Control: public, max-age=31536000, immutable er populært. Med version i filnavnet kan du trygt sætte et års cache – opdaterer du fonten, ændrer du filnavnet.

WOFF2 er allerede komprimeret – ekstra Brotli eller Gzip giver sjældent meget. Men serverens static file performance er vigtig. Har du Hostragons med LiteSpeed, NVMe-disk og korrekt cache, får du hurtigere font-svar. SSL skal være korrekt opsat for HTTP/2/HTTP/3 – se Guide til installation af SSL certifikat og HTTPS.

Selv-hostede fonts på WordPress

På WordPress afhænger font-optimering af tema, plugins og page builder. Tjek først, om du kan slå Google Fonts fra i temaets typografi-indstillinger. Mange moderne temaer har dette. Elementor, Gutenberg eller sliders har også egne font-indstillinger. Gennemgå alle komponenter for at undgå dobbelt font-indlæsning.

Den mest tekniske metode er at hoste font-filer i child theme og definere dem i temaets stylesheet. Du kan også bruge plugins til selv-hostede fonts, men for mange plugins kan gå imod performance-målet. Hvis du vælger plugin, tjek opdateringsdato, PHP-kompatibilitet og integration med cache-plugin.

Tag backup før du ændrer font-kald. Fjerner du fonten forkert, kan du ødelægge ikon-fonts eller admin-styles. På WooCommerce-sider bør du teste kurv, checkout og konto. For performance-orienteret hosting, se WordPress hosting pakker.

Teknisk SEO og Core Web Vitals – tjekliste

Efter optimering skal du ikke bare tjekke, om siden loader – du skal måle, sammenligne før/efter og teste som en rigtig bruger. Brug denne tjekliste:

• Bekræft i Network, at alle eksterne font-kald (fx Google Fonts, fonts.gstatic) er fjernet.
• Hold antallet af font-filer mellem 2-4, hvis muligt.
• Sørg for at bruge WOFF2 og rimelige filstørrelser.
• Test font-display: swap (eller optional hvor relevant).
• Brug kun preload på den mest kritiske font på første skærm.
• Tjek, at Cache-Control-headers er sat til lang cache.
• Test, at danske specialtegn vises korrekt på alle browsere.
• Sammenlign Mobile PageSpeed Insights, Lighthouse og WebPageTest før og efter.

Stol ikke på én test; netværksforhold, server-load og test-lokation kan påvirke. Lav mindst tre tests og se den gennemsnitlige tendens. Hvis LCP falder fra 2,8 til 2,3 sekunder, er det en markant forbedring. Hvis CLS stiger efter font-optimering, skal du justere fallback font og font-metrics.

Mest almindelige fejl

For mange font-familier

Den hyppigste fejl er at bruge unødvendigt mange fonts: én til overskrift, én til tekst, én til knapper, én til citater. Det koster performance. De fleste professionelle sites klarer sig med en eller to font-familier – typografi-konsistens er både hurtigere og bedre for brandet.

Forkert fallback font

Hvis system-fonten, der vises før din custom font er hentet, har meget anderledes mål, får du layout-skift (CLS). Vælg fallback font med lignende x-height, bredde og linjehøjde. Test system-ui, Arial, Helvetica, Georgia efter dit design.

Preload af alt

Preload er stærkt, men forkert brugt er det skadeligt. Preloader du alle font-vægte, forstyrrer det browserens prioriteter – især på sider med store hero-billeder. Preload kun det, der reelt bruges på første skærm.

Ignorerer licensbetingelser

Ikke alle fonts er gratis – kommercielle fonts har ofte web-licens med særlige krav. Host ikke fonts, du ikke har lov til. Arkivér licensdokumentet og gem det i projektets dokumentation.

Sikkerhed, privatliv og hosting-aspektet

Selv-hostede fonts handler ikke kun om hastighed – det giver også bedre privatliv og sikkerhed. Eksterne font-udbydere betyder, at brugerens browser sender requests til tredjeparts-domæner. I nogle brancher kan dette være relevant i forhold til GDPR og databehandling. Med selv-hosting er dataflowet mere forudsigeligt.

HTTPS er et must. Font-filer på HTTP giver mixed content-problemer og browseren kan blokere dem. Dit domæne skal have korrekt DNS, SSL-certifikat og solid hosting-performance. Skal du vælge domæne, se Domæneforespørgsel og registrering; til sikker udgivelse SSL certifikater; og til kraftfuld hosting Hostragons hostingløsninger.

Bruger du CDN, skal du tjekke CORS-indstillinger på font-filerne. Hvis fonts hostes på subdomæner, skal Access-Control-Allow-Origin være sat – ellers kan browseren ikke bruge fonten. For de fleste små/mellemstore sites er hosting fra hoveddomænet nemmest.

Hvordan måler du performance-gevinsten?

Beviset på optimering er måling. Start med at logge: antal font-requests, total font-størrelse, LCP, CLS og samlet load-tid. Implementer selv-hosting og test samme sider med samme tools. Mål forsiden, blogindlæg, kategori-sider og evt. produktsider hver for sig.

Eksempel: En blog med 6 font-requests og 420 KB font-data kan optimeres til 2 requests og 96 KB. Mobil Lighthouse kan gå fra 72 til 86; LCP fra 3,1 til 2,4 sekunder. Tallene varierer, for billeder, JS og server-tid spiller også ind. Men font-optimering er en af de hurtigste og mest målbare forbedringer.

For reelle brugerdata er Chrome User Experience Report, Search Console Core Web Vitals og RUM-tools bedst. Lab-tests finder problemer; brugerdata viser effekten i praksis. Har du meget trafik, bør du teste i staging først, og udrulle ændringer uden for peak-tider.

Mini-plan: Font-optimering på 60 minutter

Har du travlt, kan du få en hurtig start med denne plan: Brug først 10 min på DevTools til at kortlægge font-requests og tag screenshot. Brug 10 min på at bestemme, hvilke font-familier og weights du faktisk bruger. 15 min på at hente WOFF2-filer, tjekke danske tegn og lægge dem i /assets/fonts.

Brug 15 min på at definere @font-face i CSS, brug font-display: swap og fjern gamle eksterne font-kald. De sidste 10 min tester du på mobil, tjekker Network for eksterne font-kald, og ser siden i flere browsere. Cache, preload og subset kan du finjustere senere.

Planen virker især for små erhvervssites, blogs og præsentationssider. Store shops/SaaS kræver, at font-optimering indgår i design-system og deployment-processen.

Konklusion

Selv-hostede fonts kan, hvis det implementeres rigtigt, forbedre site-hastighed, brugeroplevelse og teknisk SEO markant. Nøglepunkter: Brug WOFF2, fjern unødige weights, definér font-display, preload kritiske fonts med omtanke, og brug stærke cache-settings. Det løser ikke alle performance-problemer, men det er en hurtig og målbar gevinst.

Jo stærkere dit hosting-miljø, desto bedre resultater får du af optimering. Vil du have en hurtigere og mere sikker hjemmeside, så tjek Hostragons’ hosting-, domæne- og SSL-løsninger – og gør font-optimering til en del af din performance-plan. Ingen stress – mål først, optimer bagefter, og valider resultaterne med brugeroplevelsen.

Ofte stillede spørgsmål

Er selv-hostede fonts altid hurtigere end Google Fonts?

Ikke altid. Med korrekt cache, WOFF2, få filer og hurtig server er det typisk hurtigere og mere stabilt. Men dårligt konfigurerede selv-hostede fonts kan være langsommere end optimeret ekstern brug.

Hvilket font-format skal jeg vælge til selv-hosting?

Til moderne hjemmesider er WOFF2 næsten altid bedst. Mindre filer og bred browser-support. TTF/OTF er for store til web.

Hvor mange font-vægte er ideelt?

400 og 700 er nok til de fleste sites. Nogle designs kræver 500/600, men hver ekstra vægt betyder flere filer og mere load. Fjern de, du ikke bruger.

Er font-display: swap nødvendigt?

Ikke tvunget, men anbefales i de fleste tilfælde. Det sikrer, at tekst vises med system-font indtil din font er klar, og minimerer usynlig tekst. For at undgå CLS skal du vælge en god fallback.

Skal jeg bruge plugin til selv-hostede fonts på WordPress?

Nej, ikke nødvendigvis. At hoste font-filer i child theme og definere dem i CSS er ofte den simpleste løsning. Har du begrænset teknisk erfaring, kan et opdateret og pålideligt plugin dog bruges.