Standardskriften avslører et WordPress-nettsted ved første øyekast. En systemfont skriker «jeg har ikke konfigurert noe» høyere enn noen gratismal.

Å bytte font tar ti minutter. Du trenger ikke være frontend-utvikler, og du trenger ikke betale. De fem metodene nedenfor dekker alt: fra nybegynnere som er redde for å røre kode, til nettstedseiere som trenger full kontroll.

Vi har samlet metoder som fungerer per 2026. Fra den dårligste tilnærmingen som fortsatt anbefales i utdaterte guider, til den kanoniske «WordPress-måten».

💡 Rask oversikt:

• Velg en font: Google Fonts (gratis, 1500+ skrifttyper), Adobe Fonts (Creative Cloud-abonnement), eller last opp din egen WOFF2 til serveren din.
• Bestem om du trenger en plugin (enklere, grensesnitt i tilpasseren) eller manuell tilkobling via functions.php (renere, raskere, ingen avhengighet av tredjepartskode).
• For den manuelle metoden: legg til wp_enqueue_style i functions.php og font-family i CSS.
• For plugin-metoden: installer EasyFonts eller Use Any Font, velg en skrifttype og lagre.
• Test resultatet i ulike nettlesere og på mobil: hver ekstra font legger til 50-200 KB i sideinnlasting.

Hvorfor du i det hele tatt bør bytte font på nettstedet ditt

Font former førsteinntrykk raskere enn farger eller bilder. Forskere ved University of Michigan viste allerede i 2008 at tekst satt i en kompleks font ubevisst oppfattes som «vanskelig». Lesere er mindre tilbøyelige til å følge instruksjoner og overvurderer tiden som trengs for å fullføre en oppgave.

Serif eller sans-serif har også betydning. Serif-skrifttyper (Georgia, Merriweather) øker lesetiden, men styrker opplevd autoritet. Sans-serif-fonter (Roboto, Inter) øker lesehastigheten og fungerer bedre på mobilskjermer. Dette er ikke gjetning: en gjennomgang av forskning på typografipsykologi bekrefter effekten i praksis.

For et WordPress-nettsted løser riktig font tre problemer:

• Merkevaregjenkjenning. En unik overskriftsfont hindrer at nettstedet ditt ser ut som «nok en blogg på et standardtema».
• Lesbarhet. Riktig størrelse, linjehøyde og kontrast reduserer fluktfrekvensen.
• Visuelt hierarki. Ulike skrifttyper for overskrifter og brødtekst leder den besøkendes blikk.

La oss nå bli praktiske.

Hvor du får fonter til WordPress

Det finnes tre kilder: Google Fonts, Adobe Fonts og egen hosting. La oss se på hver av dem.

Google Fonts: gratis og ingen registrering nødvendig

Den mest opplagte kilden. Over 1500 fonter, åpen lisens, bufring via Googles CDN. Passer for 95% av nettsteder.

Gå til fonts.google.com. Grensesnittet møter deg med et rutenett av kort som viser en prøve av hver font.

Filtre er til venstre. Du kan filtrere etter kategori (Serif, Sans Serif, Display, Handwriting, Monospace), språk, antall stiler og vekt. Filtre brukes umiddelbart, og resultatene oppdateres uten omlasting.

Hold musepekeren over en font for å se en meny for å endre prøveteksten. Skriv inn din egen overskrift eller ditt eget avsnitt og se hvordan det ser ut.

Klikk «View specimen» for å åpne fontsiden med alle stiler, tegnsett-tabell og prøver i ulike størrelser.

Hvis du liker en font, klikker du på det røde plusstegnet i hjørnet av kortet. Fonten legges i samlingspanelet nederst på skjermen. Du kan legge til flere familier: én for overskrifter, en annen for brødtekst.

Utvid samlingspanelet for å se fanene «Embed» og «Customize».

I «Customize»-fanen velger du stilene du trenger. Viktig: ikke kryss av for alt. Hver stil er en ekstra fil nettleseren laster inn. For et typisk nettsted er Regular (400) og Bold (700) nok, noen ganger Italic. Hastighetsindikatoren øverst til høyre viser hvor mye fonten vil bremse innlastingen.

Hvis nettstedet ditt bruker et ikke-latinsk alfabet, velger du riktig tegnsett nederst på siden. For kyrillisk er det Cyrillic.

To pilknapper øverst: den venstre deler samlingen, den høyre laster ned fontfilene til datamaskinen din. Nyttig for Photoshop eller hvis du bestemmer deg for å hoste fonten selv.

Adobe Fonts (tidligere Typekit)

Har du et Creative Cloud-abonnement, gir Adobe Fonts tilgang til profesjonelle skrifttyper som Futura, Minion Pro og Myriad. Fonter kobles til via CSS, på samme måte som Google Fonts. Gratisversjonen av Creative Cloud inkluderer et grunnleggende utvalg, noe som er nok for de fleste prosjekter.

Egendefinerte fonter i WOFF2

Har du kjøpt en lisensiert font eller lastet ned en gratis en fra Font Squirrel? Konverter til WOFF2 (moderne webfontformat, Brotli-komprimering, støttes av 97% av nettlesere) og last opp til din server. Fordel: ingen avhengighet av tredjeparts CDN og GDPR-kompatibelt. Ulempe: fonten lastes fra din server, noe som uunngåelig er tregere enn Googles CDN.

5 Måter å legge til egendefinerte fonter i WordPress

Det finnes nøyaktig fem måter. Vi går fra «ikke gjør dette» til den ideelle WordPress-metoden.

Metode 1: CSS @import (ikke gjør dette)

Google Fonts tilbyr en @import-fane med en ferdig CSS-streng. Det ser praktisk ut: kopier, lim inn, ferdig.

Teknisk sett plasseres koden i begynnelsen av barnetemaets style.css:

1
/*
2
 Theme Name: Twenty Seventeen Child
3
 Theme URI: https://wordpress.org/themes/twentyseventeen/
4
 Template: twentyseventeen
5
 Author: the WordPress team
6
 Author URI: https://wordpress.org/
7
 Version: 1.0
8
*/
9
 
10
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
11
 
12
/* additional CSS goes here */

Hvorfor er dette det dårligste alternativet? @import hindrer nettleseren i å laste flere stilark parallelt. Nettleseren laster ned CSS-filen, ser @import-direktivet inni, og først da hentes fonten. Sekvensiell lasting i stedet for parallell betyr 200-400 ms tapt per font. På mobil er dette kritisk.

Ikke bruk @import for fonter. Noensinne.

Metode 2: sette inn en link-tag i header.php

Fontbiblioteker tilbyr en <link>-tag for innsetting i <head>. Du kan plassere den direkte i header.php, malfilen som ethvert WordPress-tema har.

Plasser <link>-taggen mellom <head>- og </head>-taggene. Hvis du jobber med et barnetema, kopier header.php fra foreldretemaet til barnetemaet og rediger den der.

Denne metoden fungerer, men er skjør: temaoppdateringer vil overskrive endringene dine hvis du ikke bruker et barnetema. I tillegg er det dårlig praksis å blande innhold og kode i maler. Greit for et engangseksperiment, ikke for permanent bruk.

Metode 3: @font-face og egenhosting av fonter

Hvis fonten ligger på din server, må du deklarere den ved hjelp av @font-face-direktivet i stilarket ditt. Først laster du opp fontfilene (WOFF2, WOFF) via FTP til barnetemaets mappe, for eksempel wp-content/themes/yourtheme-child/fonts/.

Legg deretter til i style.css:

1
@font-face {
2
  font-family: 'Roboto';
3
  src: url('fonts/Roboto-Regular.woff2') format('woff2'),
4
       url('fonts/Roboto-Regular.woff') format('woff');
5
  font-weight: normal;
6
  font-style: normal;
7
  font-display: swap;
8
}

Parameteren font-display: swap er viktig: den ber nettleseren om å vise tekst med en systemfont først, for så å bytte til den egendefinerte fonten når den er lastet. Uten dette ser besøkende en blank skjerm mens fonten lastes.

Ikke glem å erstatte fontnavnet og filbanen. Hvis kildefilen din er TTF eller OTF, konverter til WOFF2 ved hjelp av Font Squirrel online-konverterer.

Denne metoden gir full kontroll, men taper for Google Fonts på hastighet: serveren din er nesten garantert tregere enn Googles CDN. For nettsteder med opptil 10 000 besøkende per måned er forskjellen umerkelig. For prosjekter med høy trafikk er den kritisk.

Metode 4: functions.php og wp_enqueue_style (den kanoniske WordPress-måten)

Den mest korrekte metoden fra et WordPress-arkitekturperspektiv. I stedet for å sette inn kode i en mal, «enqueuer» du stilarket med fonten via wp_enqueue_scripts-hooken.

Koden plasseres i det aktive temaets eller barnetemaets functions.php. Her er et fungerende eksempel for Google Fonts:

1
function techblog_add_google_fonts() {
2
    wp_enqueue_style(
3
        'techblog-google-fonts',
4
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap',
5
        array(),
6
        null
7
    );
8
}
9
add_action( 'wp_enqueue_scripts', 'techblog_add_google_fonts' );

Funksjonen wp_enqueue_style tar fire parametere: et unikt navn (handle), stilarkets URL, en array med avhengigheter (tom her), og versjon (null, WordPress setter inn sin egen). Hooken wp_enqueue_scripts sørger for at koden kjøres på riktig tidspunkt under sidelastingen.

For Adobe-fonter ble JavaScript og wp_enqueue_script tidligere brukt. Nå har Adobe Fonts gått over til en CSS-tilnærming lik Google Fonts, så wp_enqueue_style dekker begge tjenestene.

Hvorfor dette er den beste manuelle metoden:

• Fonter blir ikke overskrevet under temaoppdateringer (hvis du er i et barnetema).
• WordPress håndterer lastingsrekkefølge og løser avhengigheter.
• Kode er isolert i functions.php, maler forblir rene.
• Andre utvidelser kan deaktivere eller endre kallet ditt gjennom standard hooks.

Metode 5: utvidelse (hvis du ikke vil røre kode)

Ikke klar for å dykke ned i functions.php? En utvidelse løser problemet uten en eneste linje kode.

Easy Google Fonts (visuelt eksempel, men ikke for produksjonsnettsteder)

Den eldste fontutvidelsen i WordPress-katalogen. Tilbyr et tilpassergrensesnitt: velg en font, se endringer i sanntid, lagre.

Installasjon er standard: Utvidelser → Legg til ny → søk «Easy Google Fonts» → Installer → Aktiver.

Etter aktivering dukker et nytt «Typography»-element opp under Utseende → Tilpass. Gå inn i det, velg Typography Default, så ser du fontkontroller for avsnitt og overskrifter.

Klikk på nedtrekkslisten ved siden av elementet du vil endre. En meny utvides:

Det viktigste valget er Font Family. Her har du tilgang til hele Google Fonts-biblioteket (over 600 skrifttyper). Skrifttypene er gruppert etter kategori: serif, sans-serif, Display, Handwriting, Monospace. Du kan søke etter navn.

Klikk på en skrifttype, så ser du endringen umiddelbart i forhåndsvisningen til høyre.

Deretter kommer finjustering. Fanen Font Weight/Style styrer vekten. Text Decoration legger til understreking, gjennomstreking eller overlinje. Text Transform endrer store og små bokstaver: store bokstaver, små bokstaver eller stor forbokstav.

I fanen Appearance: skriftfarge, bakgrunnsfarge, størrelse, linjehøyde og tegnavstand.

Fanen Positioning: marger, padding, rammer, border-radius og display-egenskapen.

Når du er ferdig, klikker du på Save and Publish øverst.

Ærlig advarsel: Easy Google Fonts har ikke vært oppdatert siden 2020. På WordPress 6.4+ kan det hende at utvidelsen ikke fungerer. Noen brukere klager på at alternativet «Typography» ikke vises i tilpasseren. Vi viser det som en illustrasjon av tilnærmingen: de fleste skrifttypeutvidelser fungerer gjennom den samme tilpassermekanismen.

Hva du gjør hvis skrifttypen ikke endres

Noen temaer bruker ikke-standard CSS-selektorer. En overskrift er kanskje ikke bare <h1>, men <h1 class="entry-title">, og utvidelsen «ser ikke» det elementet.

Løsning: opprett din egen skrifttypekontroll i Settings → Google Fonts.

Knytt den nødvendige CSS-selektoren til den nye kontrollen og aktiver force override. Etter lagring vil kontrollen vises i tilpasseren sammen med standardkontrollene.

Alternative utvidelser (aktuelle i 2026)

Easy Google Fonts er ikke det eneste alternativet. Tre aktuelle alternativer:

• EasyFonts hoster Google Fonts lokalt på din server. Den oppdager automatisk skrifttyper som er i bruk, laster dem ned og serverer dem fra ditt domene. Raskere enn standard CDN-forespørsler, i tillegg til full GDPR-etterlevelse. Den letteste av de tre når det gjelder ytelsespåvirkning.
• Use Any Font lar deg laste opp dine egne skrifttyper uten CSS. Utvidelsen konverterer TTF/OTF/WOFF til webformat og hoster det på din server. Egnet for kommersielle skrifttyper kjøpt under lisens.
• Fonts Plugin er en alternativ Google Fonts-behandler med forhåndsvisning i tilpasseren. I motsetning til den utdaterte Easy Google Fonts, oppdateres den jevnlig og testes med gjeldende WordPress-versjoner.

Bruke skrifttypen på sideelementer

Skrifttypen er tilkoblet, men henger fortsatt «i løse luften». Du må fortelle nettleseren hvilke elementer den skal brukes på.

Her er grunnleggende CSS for å erstatte overskriftsskrifttypen. Legg den til via Appearance → Customize → Additional CSS:

1
h1,
2
h2,
3
h3,
4
h4,
5
h5,
6
h6 {
7
    font-family: 'Roboto', sans-serif;
8
}

For brødtekst:

1
body,
2
p,
3
li {
4
    font-family: 'Inter', sans-serif;
5
}

Viktig nyanse: skriftnavnet i font-family må samsvare nøyaktig med slik biblioteket deklarerer det. Google Fonts bruker 'Roboto', mens Adobe Fonts kan returnere 'open-sans' (uten mellomrom og uten anførselstegn). Se nøye på koden tjenesten leverer, ikke på skriftnavnet på nettsiden.

Du kan legge til denne CSS-en på tre måter: via tilpasseren (enklest, overlever temaoppdateringer), via barnetemaets style.css, eller via wp_head-hooken. Vi anbefaler den første.

⁉️🤔 Ofte stilte spørsmål

Hvor mange fonter kan du legge til på et nettsted uten å miste hastighet?

Optimalt sett to familier: én til overskrifter, én til brødtekst. Hver ekstra font legger til en HTTP-forespørsel og 50-200 KB sidevekt. Tre fonter er allerede taket. Og koble kun til stilene du trenger: Regular (400) og Bold (700) veier halvparten så mye som et sett med 5-6 stiler.

Google Fonts eller Adobe Fonts: hvilken bør du velge?

For 9 av 10 nettsteder, Google Fonts. Gratis, raskt (Google CDN), 1500+ fonter, kyrillisk er tilgjengelig i nesten alle populære skrifttyper. Adobe Fonts gir mening hvis du allerede har et Creative Cloud-abonnement og trenger en spesifikk kommersiell font som Futura eller Minion Pro.

Kan du bruke en nedlastet TTF-fil fra datamaskinen din?

Du kan, men konverter først til WOFF2 (moderne komprimert format for nettet). TTF-filer er ukomprimerte og tar betydelig mer plass. WOFF2 med Brotli-komprimering reduserer filstørrelsen flere ganger. Konverterer: Font Squirrel Webfont Generator.

Plugin eller functions.php: hva er mest pålitelig?

functions.php er mer pålitelig for langvarig bruk: ingen ekstra avhengighet, koden er gjennomsiktig, plugin-oppdateringer påvirker deg ikke. Plugins vinner på bekvemmelighet: 5 minutter mot en halvtime med å lære hooks. For et produksjonsnettsted, velg wp_enqueue_style i et child theme. For en rask prototype eller et klientnettsted som trenger et enkelt grensesnitt, bruk en plugin.

Hvorfor ser fonten annerledes ut på mobil enn på desktop?

Mobilnettlesere bytter noen ganger ut systemfonter eller renderer kantutjevning annerledes. I tillegg er skjermstørrelsene forskjellige: 16px på desktop leses fint, men på en telefon kan det være for stort. Løsning: sett en relativ størrelse ved hjelp av clamp() (for eksempel font-size: clamp(16px, 2.5vw, 20px)) og test på en ekte enhet, ikke en emulator.

Endelig oppsummering: hva du bør bruke på nettstedet ditt i 2026

Hvis vi oppsummerer alt i fem setninger:

• Google Fonts er standard fontkilde. Tilstrekkelig for 95% av prosjekter: raskt, gratis, kyrillisk er tilgjengelig overalt.
• functions.php + wp_enqueue_style er den beste manuelle metoden. Rent, overlever tema-oppdateringer, koden er gjennomsiktig.
• EasyFonts-plugin fungerer hvis du ønsker lokal hosting av Google Fonts uten kodestyr. Raskere enn standard CDN og GDPR-kompatibel.
• To stiler per font, ikke mer: Regular og Bold. Hver ekstra stil stjeler 30-50 KB last.
• WOFF2, ikke TTF: konverter før du laster opp til serveren din. Sparer en halv megabyte per side.

Å bytte fonter er en av de oppgavene der en time med nøye oppsett gir årevis med visuell gevinst. Start akkurat nå: gå til Google Fonts-nettstedet, finn et par skrifttyper til prosjektet ditt, og prøv metode 4 fra listen ovenfor.