Standardteckensnittet avslöjar en WordPress-sajt vid första anblicken. Ett systemtypsnitt skriker "jag har inte konfigurerat något" högre än någon gratismall.

Att byta typsnitt tar tio minuter. Du behöver inte vara frontend-utvecklare, och du behöver inte betala. De fem metoderna nedan täcker allt: från nybörjare som är rädda för att röra kod till sajtägare som behöver full kontroll.

Vi har sammanställt fungerande metoder aktuella för 2026. Från den sämsta metoden som fortfarande rekommenderas i föråldrade guider till det kanoniska "WordPress-sättet."

💡 Snabb översikt:

• Välj ett typsnitt: Google Fonts (gratis, 1500+ typsnitt), Adobe Fonts (Creative Cloud-prenumeration), eller ladda upp din egen WOFF2 till din server.
• Bestäm om du behöver ett plugin (enklare, gränssnitt i anpassaren) eller manuell inkoppling via functions.php (renare, snabbare, inget beroende av tredjepartskod).
• För den manuella metoden: lägg till wp_enqueue_style i functions.php och font-family i CSS.
• För plugin-metoden: installera EasyFonts eller Use Any Font, välj ett typsnitt och spara.
• Testa resultatet i olika webbläsare och på mobil: varje extra typsnitt lägger till 50-200 KB till sidladdningen.

Varför byta typsnitt på din sajt överhuvudtaget

Typsnitt formar första intryck snabbare än färger eller bilder. Forskare vid University of Michigan visade redan 2008 att text satt i ett komplext typsnitt undermedvetet uppfattas som "svår." Läsare är mindre benägna att följa instruktioner och överskattar tiden som behövs för att slutföra en uppgift.

Serif eller sans-serif spelar också roll. Serif-typsnitt (Georgia, Merriweather) ökar lästiden men förstärker upplevd auktoritet. Sans-serif-typsnitt (Roboto, Inter) snabbar upp läsningen och fungerar bättre på mobila skärmar. Detta är inga gissningar: en genomgång av forskning om typografipsykologi bekräftar effekten i praktiken.

För en WordPress-sajt löser rätt typsnitt tre problem:

• Varumärkesigenkänning. Ett unikt rubriktypsnitt hindrar din sajt från att se ut som "ännu en blogg på ett standardtema."
• Läsbarhet. Rätt storlek, radavstånd och kontrast minskar avvisningsfrekvensen.
• Visuell hierarki. Olika typsnitt för rubriker och brödtext guidar besökarens blick.

Nu blir det praktiskt.

Var man får tag på typsnitt till WordPress

Det finns tre källor: Google Fonts, Adobe Fonts och självhosting. Låt oss granska var och en.

Google Fonts: gratis och ingen registrering krävs

Den mest uppenbara källan. Över 1500 typsnitt, öppen licens, cachning via Google CDN. Passar 95% av alla sajter.

Gå till fonts.google.com. Gränssnittet möter dig med ett rutnät av kort som visar varje typsnittsprov.

Filter finns till vänster. Du kan filtrera efter kategori (Serif, Sans Serif, Display, Handwriting, Monospace), språk, antal stilar och vikt. Filter tillämpas direkt, och resultaten uppdateras utan omladdning.

Håll muspekaren över ett typsnitt för att se en meny för att ändra exempeltexten. Skriv in din egen rubrik eller ditt eget stycke och se hur det ser ut.

Klicka på "View specimen" för att öppna typsnittssidan med alla stilar, teckentabell och prover i olika storlekar.

Om du gillar ett typsnitt, klicka på det röda plustecknet i hörnet av kortet. Typsnittet hamnar i insamlingspanelen längst ner på skärmen. Du kan lägga till flera familjer: en för rubriker, en annan för brödtext.

Expandera insamlingspanelen för att se flikarna "Embed" och "Customize".

Under fliken "Customize" väljer du de stilar du behöver. Viktigt: bocka inte i allt. Varje stil är en extra fil som webbläsaren laddar. För en typisk sajt räcker Regular (400) och Bold (700), ibland Italic. Hastighetsindikatorn i det övre högra hörnet visar hur mycket typsnittet kommer att sakta ner laddningen.

Om din webbplats använder ett icke-latinskt alfabet, välj rätt teckenuppsättning längst ner på sidan. För kyrilliska är det Cyrillic.

Två pilknappar högst upp: den vänstra delar samlingen, den högra laddar ner teckensnittsfilerna till din dator. Praktiskt för Photoshop eller om du bestämmer dig för att hosta teckensnittet själv.

Adobe Fonts (tidigare Typekit)

Om du har en Creative Cloud-prenumeration ger Adobe Fonts tillgång till professionella typsnitt som Futura, Minion Pro och Myriad. Teckensnitten ansluts via CSS, på liknande sätt som Google Fonts. Den kostnadsfria Creative Cloud-nivån innehåller ett grundutbud, vilket räcker för de flesta projekt.

Egna teckensnitt i WOFF2

Har du köpt ett licensierat teckensnitt eller laddat ner ett gratis från Font Squirrel? Konvertera till WOFF2 (modernt webbteckensnittsformat, Brotli-komprimering, stöds av 97% av webbläsarna) och ladda upp till din server. Fördel: inget beroende av tredjeparts-CDN och GDPR-kompatibelt. Nackdel: teckensnittet laddas från din server, vilket oundvikligen är långsammare än Google CDN.

5 Sätt att lägga till anpassade typsnitt i WordPress

Det finns exakt fem sätt. Vi går från "gör inte så här" till den ideala WordPress-metoden.

Metod 1: CSS @import (gör inte så här)

Google Fonts erbjuder en @import-flik med en färdig CSS-sträng. Det ser smidigt ut: kopiera, klistra in, klart.

Tekniskt sett placeras koden i början av ditt barntemas 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 */

Varför är detta det sämsta alternativet? @import hindrar webbläsaren från att ladda flera stilmallar parallellt. Webbläsaren laddar ner CSS-filen, ser @import inuti, och först därefter hämtas typsnittet. Sekventiell laddning istället för parallell innebär 200-400 ms förlorat per typsnitt. På mobil är detta kritiskt.

Använd inte @import för typsnitt. Någonsin.

Metod 2: infoga en link-tagg i header.php

Typsnittsbibliotek tillhandahåller en <link>-tagg för infogning i <head>. Du kan placera den direkt i header.php, mallfilen som varje WordPress-tema har.

Placera <link> mellan taggarna <head> och </head>. Om du arbetar med ett barntema, kopiera header.php från föräldratemat till barntemat och redigera den där.

Denna metod fungerar men är skör: temauppdateringar skriver över dina ändringar om du inte använder ett barntema. Dessutom är det dålig praxis att blanda innehåll och kod i mallar. Okej för ett engångsexperiment, inte för permanent bruk.

Metod 3: @font-face och egen hostade typsnitt

Om typsnittet finns på din server måste du deklarera det med hjälp av @font-face-direktivet i din stilmall. Ladda först upp typsnittsfilerna (WOFF2, WOFF) via FTP till din barntemamapp, till exempel wp-content/themes/yourtheme-child/fonts/.

Lägg sedan till 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
}

Parametern font-display: swap är viktig: den säger åt webbläsaren att först visa text i ett systemtypsnitt och sedan byta till det anpassade typsnittet när det har laddats. Utan detta ser besökarna en tom skärm medan typsnittet laddas.

Glöm inte att ersätta typsnittsnamnet och sökvägen. Om din källfil är TTF eller OTF, konvertera till WOFF2 med hjälp av Font Squirrels onlinekonverterare.

Denna metod ger full kontroll men förlorar mot Google Fonts i hastighet: din server är nästan säkert långsammare än Googles CDN. För sajter med upp till 10 000 besökare per månad är skillnaden omärkbar. För projekt med hög trafik är den kritisk.

Metod 4: functions.php och wp_enqueue_style (det kanoniska WordPress-sättet)

Den mest korrekta metoden ur ett WordPress-arkitekturperspektiv. Istället för att infoga kod i en mall "köar" du stilmallen med typsnittet via wp_enqueue_scripts-hooken.

Koden placeras i det aktiva temats eller barntemats functions.php. Här är ett fungerande exempel för 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' );

Funktionen wp_enqueue_style tar fyra parametrar: ett unikt namn (handle), stilmallens URL, en array med beroenden (tom här) och version (null, WordPress ersätter med sin egen). wp_enqueue_scripts-hooken säkerställer att koden körs vid rätt tidpunkt under sidladdningen.

För Adobe Fonts användes tidigare JavaScript och wp_enqueue_script. Nu har Adobe Fonts bytt till en CSS-metod liknande Google Fonts, så wp_enqueue_style täcker båda tjänsterna.

Varför detta är den bästa manuella metoden:

• Typsnitt skrivs inte över vid temauppdateringar (om du är i ett barntema).
• WordPress hanterar laddningsordning och löser beroenden.
• Koden är isolerad i functions.php, mallar hålls rena.
• Andra tillägg kan inaktivera eller modifiera ditt anrop via standardhookar.

Metod 5: tillägg (om du inte vill röra kod)

Inte redo att dyka in i functions.php? Ett tillägg löser problemet utan en enda rad kod.

Easy Google Fonts (visuellt exempel, men inte för produktionssajter)

Det äldsta typsnittstillägget i WordPress-katalogen. Erbjuder ett anpassargränssnitt: välj ett typsnitt, se ändringar i realtid, spara.

Installationen är standard: Tillägg → Lägg till nytt → sök "Easy Google Fonts" → Installera → Aktivera.

Efter aktivering visas ett nytt "Typography"-objekt under Utseende → Anpassa. Gå in där, välj Typography Default, så ser du typsnittskontroller för stycken och rubriker.

Klicka på rullgardinsmenyn bredvid det element du vill ändra. En meny expanderar:

Det viktigaste alternativet är Font Family. Här har du tillgång till hela Google Fonts-biblioteket (över 600 typsnitt). Typsnitten är grupperade efter kategori: serif, sans-serif, Display, Handwriting, Monospace. Du kan söka efter namn.

Klicka på ett typsnitt så syns ändringen direkt i förhandsvisningen till höger.

Sedan kommer finjusteringen. Fliken Font Weight/Style styr vikten. Text Decoration lägger till understrykning, genomstrykning eller överlinje. Text Transform växlar mellan versaler, gemener eller inledande versal.

Under fliken Appearance: teckenfärg, bakgrundsfärg, storlek, radavstånd och teckenmellanrum.

Fliken Positioning: marginaler, utfyllnad, ramar, ramradie och display-egenskapen.

När du är klar klickar du på Save and Publish högst upp.

Ärlig varning: Easy Google Fonts har inte uppdaterats sedan 2020. På WordPress 6.4+ kan tillägget sluta fungera. En del användare klagar på att alternativet "Typography" inte visas i anpassaren. Vi visar det som en illustration av tillvägagångssättet: de flesta typsnittstillägg fungerar via samma anpassarmekanism.

Vad du gör om typsnittet inte ändras

Vissa teman använder icke-standardiserade CSS-selektorer. En rubrik kanske inte bara är <h1> utan <h1 class="entry-title">, och tillägget "ser inte" det elementet.

Lösning: skapa en egen typsnittskontroll i Settings → Google Fonts.

Koppla den nödvändiga CSS-selektorn till den nya kontrollen och aktivera force override. Efter att du sparat visas kontrollen i anpassaren tillsammans med standardalternativen.

Alternativa tillägg (aktuella 2026)

Easy Google Fonts är inte det enda alternativet. Tre fungerande alternativ:

• EasyFonts hostar Google Fonts lokalt på din server. Det upptäcker automatiskt vilka typsnitt som används, laddar ner dem och levererar dem från din domän. Snabbare än vanliga CDN-anrop, plus full GDPR-efterlevnad. Det lättaste av de tre vad gäller prestandapåverkan.
• Use Any Font låter dig ladda upp egna typsnitt utan CSS. Tillägget konverterar TTF/OTF/WOFF till webbformat och hostar dem på din server. Passar för kommersiella typsnitt som köpts under licens.
• Fonts Plugin är en alternativ Google Fonts-hanterare med förhandsvisning i anpassaren. Till skillnad från det föråldrade Easy Google Fonts uppdateras det regelbundet och testas med aktuella WordPress-versioner.

Applicera typsnittet på sajtens element

Typsnittet är inkopplat men hänger fortfarande "i luften". Du måste tala om för webbläsaren vilka element det ska appliceras på.

Här är grundläggande CSS för att byta rubriktypsnitt. Lägg till den via Appearance → Customize → Additional CSS:

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

För brödtext:

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

Viktig nyans: teckensnittsnamnet i font-family måste stämma exakt med hur biblioteket deklarerar det. Google Fonts använder 'Roboto', medan Adobe Fonts kan returnera 'open-sans' (utan mellanslag och utan citattecken). Titta noga på koden tjänsten tillhandahåller, inte på teckensnittsnamnet på webbplatsen.

Du kan lägga till denna CSS på tre sätt: via anpassaren (enklast, överlever temauppdateringar), via barntemats style.css eller via wp_head-hooken. Vi rekommenderar det första.

⁉️🤔 Vanliga frågor

Hur många typsnitt kan man lägga till på en sajt utan att tappa fart?

Optimalt sett två familjer: en för rubriker, en för brödtext. Varje extra typsnitt lägger till en HTTP-förfrågan och 50-200 KB sidvikt. Tre typsnitt är redan det taket. Och koppla bara in de stilar du behöver: Regular (400) och Bold (700) väger hälften så mycket som en uppsättning på 5-6 stilar.

Google Fonts eller Adobe Fonts: vilket ska man välja?

För 9 av 10 sajter, Google Fonts. Gratis, snabbt (Googles CDN), 1500+ typsnitt, kyrilliska finns i nästan alla populära teckensnitt. Adobe Fonts är vettigt om du redan har en Creative Cloud-prenumeration och behöver ett specifikt kommersiellt typsnitt som Futura eller Minion Pro.

Kan man använda en nedladdad TTF-fil från sin dator?

Det kan du, men konvertera först till WOFF2 (modernt komprimerat format för webben). TTF-filer är okomprimerade och tar betydligt mer plats. WOFF2 med Brotli-komprimering minskar filstorleken flera gånger om. Konverterare: Font Squirrel Webfont Generator.

Plugin eller functions.php: vilket är mest tillförlitligt?

functions.php är mer tillförlitligt för långsiktig användning: inget extra beroende, koden är transparent, plugin-uppdateringar påverkar dig inte. Plugins vinner på bekvämlighet: 5 minuter mot en halvtimmes inlärning av hooks. För en produktionssajt, välj wp_enqueue_style i ett child theme. För en snabb prototyp eller en kundsajt som behöver ett enkelt gränssnitt, använd en plugin.

Varför ser typsnittet annorlunda ut på mobilen än på datorn?

Mobila webbläsare byter ibland ut systemtypsnitt eller renderar kantutjämning annorlunda. Dessutom är skärmstorlekarna olika: 16px på datorn är läsbart, men på en telefon kan det vara för stort. Lösning: sätt en relativ storlek med clamp() (till exempel font-size: clamp(16px, 2.5vw, 20px)) och testa på en riktig enhet, inte en emulator.

Slutlig sammanfattning: vad du ska använda på din sajt 2026

Om vi sammanfattar allt i fem meningar:

• Google Fonts är standardkällan för typsnitt. Tillräckligt för 95% av projekten: snabbt, gratis, kyrilliska finns överallt.
• functions.php + wp_enqueue_style är den bästa manuella metoden. Rent, överlever temauppdateringar, koden är transparent.
• EasyFonts-plugin fungerar om du vill ha lokal hosting av Google Fonts utan kodstrul. Snabbare än standard-CDN och GDPR-kompatibelt.
• Två stilar per typsnitt, inte fler: Regular och Bold. Varje extra stil stjäl 30-50 KB laddning.
• WOFF2, inte TTF: konvertera innan du laddar upp till din server. Sparar en halv megabyte per sida.

Att byta typsnitt är en av de uppgifter där en timmes noggrann inställning ger år av visuell utdelning. Börja nu direkt: gå till Google Fonts webbplats, hitta ett par teckensnitt för ditt projekt och prova metod 4 från listan ovan.