Roboto i overskrifter, Open Sans i brødtekst. Nettstedets typografi ser ut som halvparten av alle WordPress-installasjoner. Den besøkende la merke til mønsteret, kjente igjen fonten, og nettstedet mistet noe av sin egenart før første avsnitt.

En egendefinert font kobles til WordPress på to måter: via en plugin på 2 minutter uten en eneste linje kode, eller manuelt via @font-face med full kontroll over filene. Begge fungerer pålitelig, og valget avhenger av din erfaring med CSS.

Nedenfor går vi gjennom hvor du får tak i fonter, hvordan du setter opp en plugin, og hvordan du legger til @font-face i et child theme. Koden er hentet fra fungerende installasjoner: lim den inn, bytt ut filnavnet, så er typografien din klar.

💡 Hurtigoversikt:

• Last ned en font fra DaFont eller FontSquirrel i WOFF2- eller TTF-format: minst tre vekter (regular, bold, italic).
• Installer Use Any Font eller Fonts Plugin, last opp filen via administrasjonspanelet og tilordne fonten til elementer. Ingen kode nødvendig.
• Eller koble til manuelt: opprett en fonts-mappe i child theme-et, last opp filer via FTP og legg til @font-face i style.css for hver vekt.
• Sjekk visningen i flere nettlesere og ikke installer mer enn to egendefinerte fonter: hver fil øker sidevekten.

Hvor får man tak i fonter og i hvilket format

Alle kjenner Google Fonts, og det er nettopp derfor de er overalt. Trenger du noe som er mindre utbrukt, her er tre velprøvde kilder.

DaFont tilbyr over 3 500 fonter med kategorier fra tegneserier til vintage. De fleste er gratis for personlig bruk. For kommersielle prosjekter må du sjekke lisensen for hver enkelt fil, de er oppført på fontsiden.

FontSquirrel fokuserer på gratis fonter med kommersielle lisenser. Samlingen er liten, men hver font er juridisk gjennomgått. Den innebygde generatoren konverterer en nedlastet fil til WOFF og WOFF2 med ett klikk.

FontSpring selger betalte fonter, men nesten hver familie har én eller to gratis vekter. Les lisensen nøye før du laster ned: ulike vekter kan ha ulike vilkår.

En generell regel: ikke legg mer enn to egendefinerte fonter på et nettsted. Én til overskrifter, en annen til brødtekst, det er nok. Hver fil legger til en HTTP-forespørsel og øker sidevekten med 30-100 KB.

Last ned alle vekter samtidig: regular, bold, italic og bold italic. Hvis filen bare har én vekt, vil nettleseren jukse til seg fet og kursiv med kunstig fortykning, og resultatet ser grovt ut.

Metode 1: plugin på 2 minutter

En plugin, den enkleste veien. Installert, lastet opp fontfilen, valgte hvor den skal brukes. Ingen kode, ingen FTP-tilkoblinger.

Use Any Font

🔗 Use Any Font på WordPress.org

🔗 Skjermbilder og demo

Laster opp fonter i TTF-, OTF- og WOFF-format, konverterer automatisk til WOFF2 med Brotli-komprimering. Ifølge pluginsiden på WordPress.org øker lastehastigheten med omtrent 30%. Fontene lagres på din server: GDPR-samsvar rett ut av esken, ingen avhengighet av eksterne API-er etter konvertering.

Etter installasjon får du en API-nøkkel (gratisnøkkelen Lite gir én konvertering), laster opp filen og tildeler fonten via det visuelle grensesnittet. Du kan bruke den på overskrifter, avsnitt eller spesifikke blokker direkte fra administrasjonspanelet.

Støtter integrasjon med Elementor, Divi, WPBakery, Gutenberg: tildel fonten én gang i pluginen, så vises den i byggeverktøyets fontliste.

Merk: for flere fonter trenger du en Premium-nøkkel. For et typisk nettsted er gratisversjonen nok: én merkevarefont til overskrifter, Google Fonts til brødtekst.

Fonts Plugin

🔗 Fonts Plugin på WordPress.org

🔗 Skjermbilder av pluginen

Tidligere Olympus Google Fonts: omdøpt, funksjonaliteten utvidet. Ifølge pluginsiden har den over 200 000 aktive installasjoner og en 5-stjerners vurdering fra over 1 200 brukere. Støtter Google Fonts, Adobe Fonts (Typekit) og opplasting av egne filer.

Oppsettet gjøres via tilpasseren: velg en font, se en live forhåndsvisning, lagre.

Pro-versjonen legger til lokal hosting av Google Fonts for GDPR, selektiv innlasting av kun nødvendige vekter og kontroll over størrelse, farge, linjehøyde. Gratisversjonen er nok for de fleste nettsteder.

Plugin eller manuelt: når velge hva

En plugin vinner på hastighet: 2-minutters installasjon, ingen kode nødvendig. Men du er avhengig av plugin-oppdateringer og kompatibiliteten med WordPress-versjonen.

Manuell installasjon via @font-face er mer kompleks å sette opp, men du kontrollerer hver byte. Ingen tredjeparts API-er, ingen oppdateringer som ødelegger typografien din.

Hvis du allerede jobber med et child theme, vil den manuelle metoden passe organisk inn i CSS-en din. Skrifttyper blir en del av temaet og vil leve der i årevis.

Metode 2: manuell installasjon via @font-face

@font-face-direktivet kobler til skriftfiler direkte fra din server. Støttede formater er TTF, OTF, WOFF, WOFF2 og SVG. Hver vekt trenger en egen kodeblokk.

Men etter oppsett glemmer du typografi i årevis: WordPress- og temaoppdateringer påvirker ikke skriftene, de ligger i child-temaet ditt og lastes hver gang som en del av CSS.

Før du starter, opprett et child-tema: alle redigeringer går inn i det, parent-temaet forblir urørt og vil oppdatere uten at du mister endringene dine.

Trinn 1: opprett en mappe for skrifter

I child-tema-mappen oppretter du en fonts-katalog. Legg den til via FTP eller filbehandleren i hosting:

1
wp-content/themes/your-child-theme/fonts/

Hvis child-temaet ditt heter twentytwentyfour-child, blir stien wp-content/themes/twentytwentyfour-child/fonts/.

Trinn 2: last opp skriftfiler til serveren

Kopier de nedlastede filene til fonts-mappen via FTP eller filbehandleren i hosting. For hver vekt, en egen fil:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

I praksis er formatene WOFF og WOFF2 nok: de dekker alle moderne nettlesere og veier mindre enn TTF. Ifølge MDN Web Docs komprimerer WOFF2 en skrift 30% mer effektivt enn WOFF og støttes av alle nettlesere siden 2016.

Nettleseren vil velge riktig format blant de som er koblet til: hvis den støtter WOFF2, laster den det, hvis ikke, tar den WOFF.

Trinn 3: legg til @font-face i style.css

Åpne child-temaets style.css og legg til kode etter temahodet (kommentaren med temanavn og beskrivelse). Start med normal vekt:

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

font-family, skriftnavnet du vil bruke i CSS. Gi det et navn så du ikke forveksler det med systemskrifter: ikke Arial, men MyBrandSans eller BrandHeading. src, sti til filer relativt til style.css. Rekkefølgen har betydning: WOFF2 først (lettest), WOFF som nummer to (reserveløsning for eldre nettlesere).

Trinn 4: legg til kursiv

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Merk: font-family er den samme, font-weight forblir normal, og font-style endres til italic. Nettleseren vil bytte inn riktig fil for em-taggen og egenskapen font-style: italic.

Trinn 5: legg til fet vekt

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Her er font-style normal igjen, og font-weight er nå bold. Nå vil strong-taggen og egenskapen font-weight: bold rendres med din fete fil, ikke nettleserens falske fortykning. Forskjellen er merkbar: ekte fet vekt er balansert av skriftdesigneren, falsk ser grovt ut.

Trinn 6: fet kursiv (valgfritt)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Fire vekter dekker praktisk talt alle typografiske oppgaver på et vanlig nettsted. Hvis designet ikke krever fet kursiv, hopp over dette trinnet: filen lastes ikke før CSS eksplisitt ber om kombinasjonen bold + italic.

Trinn 7: bruk skriften på elementer

Etter @font-face legger du til regler som tildeler skriften til spesifikke elementer. Legg til i child-temaets style.css:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

Den første regelen: din skrift for brødtekst, med en fallback til system-Arial. Den andre: samme skrift for overskrifter, med en fallback til Georgia.

Hvis skriftfilen ikke lastes (serveren er nede eller stien er feil), blir ikke nettstedet uten tekst: nettleseren vil vise Arial eller Georgia. En fallback er obligatorisk: uten den vil nettleseren bruke systemets standardskrift, vanligvis Times New Roman, og typografien vil falle fra hverandre.

Ferdig. En egendefinert skrift er koblet til uten utvidelser og eksterne tjenester. Typografien lever på din server og vil ikke ryke hvis et tredjeparts-API endrer vilkår eller går ned.

Video: trinnvis oppsett på et live-nettsted

Se hvordan hele prosessen ser ut på et ekte WordPress-nettsted, fra valg av skrift til bruk på overskrifter:

Videoen viser begge metodene: via plugin og via @font-face. Det er praktisk å sette på pause og følge med. Videoen er på engelsk, men prosessen er visuelt tydelig selv uten lyd.

⁉️🤔 Ofte stilte spørsmål

Hvor mange egendefinerte fonter kan jeg legge til på et nettsted?

Ikke mer enn to: én til overskrifter, en annen til brødtekst. Hver font består av flere vektfiler på 30 til 100 KB hver. To fonter vil gi merkbar økning i sidevekt. En tredje vil merkbart forverre hastigheten, spesielt på trege mobiltilkoblinger.

Er det obligatorisk å opprette et child theme for @font-face?

Formelt sett nei: du kan sette inn @font-face direkte i hovedtemaets style.css. Men etter neste temaoppdatering vil alle redigeringer forsvinne. Et child theme løser dette en gang for alle. Hvis du ikke har opprettet et ennå, vil vår guide til WordPress child theme lede deg fra installasjon til første resultat.

Hvilket filformat bør jeg velge: WOFF, WOFF2 eller TTF?

WOFF2, som prioritet. Det komprimerer en font merkbart mer enn WOFF og støttes av alle moderne nettlesere. WOFF, som reserve for eldre nettleserversjoner. Koble til TTF og OTF bare hvis fonten ikke er tilgjengelig i webformater: de er ikke komprimert og veier dobbelt så mye. Rekkefølgen i src er alltid: WOFF2, deretter WOFF.

Hvorfor vises ikke fonten etter installasjon?

Tre vanlige årsaker. Første: filbanen i url() er feil, sjekk at banen er bygget fra style.css, ikke fra nettstedets rot. Andre: nettleserbufferen holder på gammel CSS, åpne nettstedet i inkognito eller tøm bufferen med Ctrl+F5. Tredje: konflikt med et tema som overstyrer font-family med høyere prioritet, sjekk i inspektøren hvilken CSS-selektor som faktisk brukes på teksten.

Må jeg spesifisere format() i src?

Formelt sett bestemmer nettleseren formatet selv fra filhodene. Men eksplisitt format('woff2') gjør utvelgelsen raskere: nettleseren laster ikke ned en fil den definitivt ikke støtter. Så spesifiser det alltid. Dette er en anbefaling fra CSS Fonts Level 4-spesifikasjonen.

Hvordan sjekker jeg at fonten lastes fra min server og ikke eksternt?

Åpne DevTools (F12), Nettverk-fanen, Fonts-filter, oppdater siden. Listen skal bare ha filer fra ditt domene. Hvis du ser fonts.googleapis.com eller fonts.gstatic.com, lastes Google Fonts eksternt. For GDPR-samsvar, flytt dem til lokal hosting via Fonts Plugin Pro eller last ned manuelt og koble til via @font-face.

Hvilken fonttilkoblingsmetode bør jeg velge?

Begge metodene fungerer pålitelig. Valget avhenger av hva som er viktigst for deg: oppsetthastighet eller kontroll over hver byte.

Skal du installere en font for første gang og vil ikke røre kode, velg Use Any Font. Lastet opp filen, tilordnet til overskrifter, ferdig. Gratisversjonen er nok til én merkevarefont på overskrifter.

Trenger du tilgang til Google Fonts-katalogen med direkte forhåndsvisning i tilpasseren, velg Fonts Plugin. Gratisversjonen er nok til de fleste oppgaver, Pro trengs bare for lokal hosting av Google Fonts i henhold til GDPR.

Jobber du allerede med et child theme og er vant til å redigere CSS manuelt, velg @font-face. Null eksterne avhengigheter, full kontroll, og etter oppsett trenger du ikke tenke på typografi på årevis. Temaoppdateringer påvirker ikke fonter, de lever i ditt child theme som en del av CSS.

Start med en plugin: det tar 2 minutter og innebærer ingen risiko. Hvilken font har du på nettstedet ditt nå, temastandarden eller har du allerede koblet til din egen?