Roboto i rubriker, Open Sans i brödtext. Webbplatsens typografi ser ut som hälften av alla WordPress-installationer. Besökaren lade märke till mönstret, kände igen typsnittet, och sajten förlorade en del av sin individualitet redan före första stycket.

Ett anpassat typsnitt kopplas till WordPress på två sätt: via ett tillägg på 2 minuter utan en enda kodrad, eller manuellt med @font-face och full kontroll över filerna. Båda fungerar pålitligt, valet beror på din erfarenhet av CSS.

Här går vi igenom var du hämtar typsnitt, hur du installerar ett tillägg och hur du lägger till @font-face i ett barntema. Koden är hämtad från fungerande installationer: klistra in den, byt ut filnamnet, så är din typografi klar.

💡 Snabb översikt:

• Ladda ner ett typsnitt från DaFont eller FontSquirrel i WOFF2- eller TTF-format: minst tre vikter (regular, bold, italic).
• Installera Use Any Font eller Fonts Plugin, ladda upp filen via adminpanelen och tilldela typsnittet till element. Ingen kod behövs.
• Eller anslut manuellt: skapa en fonts-mapp i barntemat, ladda upp filer via FTP och lägg till @font-face i style.css för varje vikt.
• Kontrollera visningen i flera webbläsare och installera inte fler än två anpassade typsnitt: varje fil ökar sidvikten.

Var man hämtar typsnitt och i vilket format

Alla känner till Google Fonts, vilket är precis därför de finns överallt. Behöver du något mindre överanvänt finns här tre beprövade källor.

DaFont erbjuder över 3 500 typsnitt med kategorier från serier till vintage. De flesta är gratis för personligt bruk. För kommersiella projekt, kontrollera licensen för varje fil separat, de listas på typsnittets sida.

FontSquirrel fokuserar på gratis typsnitt med kommersiella licenser. Samlingen är liten, men varje typsnitt har granskats av jurister. Den inbyggda generatorn konverterar en nedladdad fil till WOFF och WOFF2 med ett klick.

FontSpring säljer betaltypsnitt, men nästan varje familj har en eller två gratisvikter. Läs licensen noggrant innan du laddar ner: olika vikter kan ha olika villkor.

Allmän regel: använd inte fler än två anpassade typsnitt på en sajt. Ett för rubriker, ett annat för brödtext, det räcker. Varje fil lägger till en HTTP-förfrågan och ökar sidvikten med 30-100 kB.

Ladda ner alla vikter på en gång: regular, bold, italic och bold italic. Om filen bara har en vikt kommer webbläsaren att fejka bold och italic med konstgjord förtjockning, resultatet ser grovt ut.

Metod 1: tillägg på 2 minuter

Ett tillägg, den enklaste vägen. Installerat, laddade upp typsnittsfilen, valde var det ska tillämpas. Ingen kod, inga FTP-anslutningar.

Use Any Font

🔗 Use Any Font på WordPress.org

🔗 Skärmdumpar och demo

Laddar upp typsnitt i TTF-, OTF- och WOFF-format, konverterar automatiskt till WOFF2 med Brotli-komprimering. Enligt pluginsidan på WordPress.org ökar laddningshastigheten med cirka 30%. Typsnitten lagras på din server: GDPR-efterlevnad direkt, inget beroende av externa API:er efter konvertering.

Efter installation får du en API-nyckel (gratisnyckeln Lite ger en konvertering), laddar upp filen och tilldelar typsnittet via det visuella gränssnittet. Du kan applicera det på rubriker, brödtext eller specifika block direkt från adminpanelen.

Stöder integration med Elementor, Divi, WPBakery, Gutenberg: tilldela typsnittet en gång i pluginet, så visas det i byggarens typsnittslista.

Obs: för flera typsnitt behöver du en Premium-nyckel. För en typisk sajt räcker gratisversionen: ett varumärkestypsnitt för rubriker, Google Fonts för brödtext.

Fonts Plugin

🔗 Fonts Plugin på WordPress.org

🔗 Plugin-skärmdumpar

Tidigare Olympus Google Fonts: omdöpt, utökad funktionalitet. Enligt pluginsidan har det 200 000+ aktiva installationer och 5 stjärnor i betyg från över 1 200 användare. Stöder Google Fonts, Adobe Fonts (Typekit) och uppladdning av egna filer.

Installationen sker via anpassaren: välj ett typsnitt, se en live-förhandsvisning, spara.

Pro-versionen lägger till lokal hosting av Google Fonts för GDPR, selektiv inläsning av endast nödvändiga vikter samt kontroll över storlek, färg och radavstånd. Gratisversionen räcker för de flesta sajter.

Plugin eller manuellt: när ska man välja vad

Ett plugin vinner på snabbhet: 2 minuters installation, ingen kod behövs. Men du är beroende av plugin-uppdateringar och dess kompatibilitet med WordPress-versionen.

Manuell installation via @font-face är mer komplex att sätta upp, men du kontrollerar varje byte. Inga tredjeparts-API:er, inga uppdateringar som förstör din typografi.

Om du redan arbetar med ett barntema passar den manuella metoden organiskt in i din CSS. Typsnitten blir en del av temat och kommer att finnas där i åratal.

Metod 2: manuell installation via @font-face

@font-face-direktivet kopplar in teckensnittsfiler direkt från din server. Formaten som stöds är TTF, OTF, WOFF, WOFF2 och SVG. Varje vikt behöver ett separat kodblock.

Men efter installationen glömmer du typografin i åratal: WordPress- och temauppdateringar påverkar inte teckensnitten, de ligger i ditt barntema och laddas varje gång som en del av CSS:en.

Innan du börjar, skapa ett barntema: alla redigeringar görs där, föräldratemat förblir orört och kan uppdateras utan att dina ändringar försvinner.

Steg 1: skapa en mapp för teckensnitt

Skapa en katalog som heter fonts i barntemats mapp. Lägg till den via FTP eller webbhotellets filhanterare:

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

Om ditt barntema heter twentytwentyfour-child blir sökvägen wp-content/themes/twentytwentyfour-child/fonts/.

Steg 2: ladda upp teckensnittsfilerna till servern

Kopiera de nedladdade filerna till mappen fonts via FTP eller webbhotellets filhanterare. En separat fil för varje vikt:

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 praktiken räcker formaten WOFF och WOFF2: de täcker alla moderna webbläsare och väger mindre än TTF. Enligt MDN Web Docs komprimerar WOFF2 ett teckensnitt 30% effektivare än WOFF och stöds av alla webbläsare sedan 2016.

Webbläsaren väljer själv rätt format bland de som är inkopplade: om den stöder WOFF2 laddar den det, annars tar den WOFF.

Steg 3: lägg till @font-face i style.css

Öppna barntemats style.css och lägg till kod efter temats header (kommentaren med temats namn och beskrivning). Börja med den normala vikten:

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, teckensnittsnamnet du använder i CSS. Namnge det så att du inte blandar ihop det med systemteckensnitt: inte Arial, utan MyBrandSans eller BrandHeading. src, sökväg till filerna relativt style.css. Ordningen spelar roll: WOFF2 först (lättast), WOFF som andrahandsval (reserv för äldre webbläsare).

Steg 4: lägg till 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
}

Observera: font-family är samma, font-weight förblir normal och font-style ändras till italic. Webbläsaren byter ut rätt fil för em-taggen och egenskapen font-style: italic.

Steg 5: lägg till fet vikt

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
}

Här är font-style normal igen och font-weight är nu bold. Nu kommer strong-taggen och egenskapen font-weight: bold att renderas med din feta fil, inte webbläsarens fejkade förtjockning. Skillnaden märks: äkta fet vikt är balanserad av teckensnittsdesignern, fejkad ser grov ut.

Steg 6: fet kursiv (valfritt)

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
}

Fyra vikter täcker praktiskt taget alla typografiska behov på en vanlig sajt. Om designen inte kräver fet kursiv, hoppa över det här steget: filen laddas inte förrän CSS uttryckligen efterfrågar kombinationen bold + italic.

Steg 7: applicera teckensnittet på element

Efter @font-face lägger du till regler som tilldelar teckensnittet till specifika element. Lägg till i barntemats style.css:

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

Första regeln: ditt teckensnitt för brödtext, med Arial som reserv. Andra: samma teckensnitt för rubriker, med Georgia som reserv.

Om teckensnittsfilen inte laddas (servern ligger nere eller sökvägen är fel) står sajten inte utan text: webbläsaren visar Arial eller Georgia. En reserv är obligatorisk: utan den ersätter webbläsaren med systemets standardteckensnitt, oftast Times New Roman, och typografin fallerar.

Klart. Ett anpassat teckensnitt är inkopplat utan plugins och externa tjänster. Typografin finns på din egen server och går inte sönder om ett tredjeparts-API ändrar villkoren eller ligger nere.

Video: steg-för-steg-installation på en live-sajt

Se hur hela processen ser ut på en riktig WordPress-sajt, från val av teckensnitt till applicering på rubriker:

Videon visar båda metoderna: via plugin och via @font-face. Det är smidigt att pausa och följa med. Videon är på engelska, men processen är visuellt tydlig även utan ljud.

⁉️🤔 Vanliga frågor

Hur många anpassade typsnitt kan jag lägga till på en webbplats?

Inte fler än två: ett för rubriker, ett för brödtext. Varje typsnitt innehåller flera viktfiler på 30 till 100 KB vardera. Två typsnitt ger redan märkbar extra vikt vid sidladdning. Ett tredje försämrar hastigheten påtagligt, särskilt på långsamma mobila anslutningar.

Måste jag skapa ett barntema för @font-face?

Formellt nej: du kan lägga in @font-face direkt i huvudtemats style.css. Men efter nästa temauppdatering försvinner alla redigeringar. Ett barntema löser detta en gång för alla. Om du inte har skapat ett ännu, guidar vår guide för WordPress barntema dig från installation till första resultat.

Vilket filformat ska jag välja: WOFF, WOFF2 eller TTF?

WOFF2, som prioritet. Det komprimerar ett typsnitt märkbart mer än WOFF och stöds av alla moderna webbläsare. WOFF, som reserv för äldre webbläsarversioner. Anslut TTF och OTF endast om typsnittet inte finns i webbformat: de är okomprimerade och väger dubbelt så mycket. Ordningen i src är alltid: WOFF2, sedan WOFF.

Varför visas inte typsnittet efter installationen?

Tre vanliga orsaker. För det första: sökvägen till filen i url() är fel, kontrollera att sökvägen utgår från style.css, inte från webbplatsens rot. För det andra: webbläsarens cache håller kvar gammal CSS, öppna webbplatsen i inkognitoläge eller rensa cache med Ctrl+F5. För det tredje: konflikt med ett tema som åsidosätter font-family med högre prioritet, kontrollera i inspektören vilken CSS-selektor som faktiskt tillämpas på texten.

Behöver jag ange format() i src?

Formellt avgör webbläsaren formatet själv från filhuvuden. Men explicit format('woff2') snabbar upp valet: webbläsaren laddar inte ner en fil den definitivt inte stöder. Så ange det alltid. Detta är en rekommendation från CSS Fonts Level 4-specifikationen.

Hur kontrollerar jag att typsnittet laddas från min server och inte externt?

Öppna DevTools (F12), fliken Nätverk, filtret Typsnitt, uppdatera sidan. Listan ska bara ha filer från din domän. Om du ser fonts.googleapis.com eller fonts.gstatic.com laddas Google Fonts externt. För GDPR-efterlevnad, flytta dem till lokal hosting via Fonts Plugin Pro eller ladda ner manuellt och anslut via @font-face.

Vilken metod för typsnittsanslutning ska jag välja?

Båda metoderna fungerar tillförlitligt. Valet beror på vad som är viktigast för dig: snabb installation eller kontroll över varje byte.

Ska du installera ett typsnitt för första gången och vill inte röra kod, ta Use Any Font. Ladda upp filen, tilldela till rubriker, klart. Gratisversionen räcker för ett varumärkestypsnitt på rubriker.

Behöver du tillgång till Google Fonts-katalogen med live-förhandsvisning direkt i anpassaren, ta Fonts Plugin. Gratisversionen räcker för de flesta uppgifter, Pro behövs bara för lokal hosting av Google Fonts enligt GDPR.

Arbetar du redan med ett barntema och är van att redigera CSS manuellt, välj @font-face. Noll externa beroenden, full kontroll, och efter installationen tänker du inte på typografi på flera år. Temauppdateringar påverkar inte typsnitten, de lever i ditt barntema som en del av CSS.

Börja med ett plugin: det tar 2 minuter och innebär ingen risk. Vilket typsnitt har du på din webbplats nu, temats standard eller har du redan anslutit ett eget?