🔤 20 Google Fonts för WordPress och WooCommerce: parningar, kyrilliska och hastighet 2026

Webbplatsen laddar på tre sekunder, men besökaren lämnar efter två. I 9 av 10 fall är problemet inte webbhotellet och inte plugins, problemet är typsnittet. Ett dåligt par med "rubrik + brödtext" dödar läsbarheten, och fyra familjer med åtta snitt vardera drar ner PageSpeed under 50.

Google Fonts, en katalog med över 1 700 gratis webbtypsnitt. Att välja en fungerande kombination för WordPress och WooCommerce är en uppgift med en hake: vissa fallerar på mobilen, vissa fungerar dåligt med kyrilliska tecken, och vissa drar 400 KB per snitt.

Vi gick igenom katalogen och valde ut 20 typsnitt som inte sviker dig. För varje typsnitt får du ärliga fördelar, nackdelar och ett färdigt par för en butik eller blogg.

💡 Snabb överblick:

• Definiera din varumärkeston: strikt sans-serif för teknik och finans, varmt rundat för barn- och livsstilsprojekt, serif för innehållstunga sajter.
• Begränsa antalet familjer: en för rubriker, en för brödtext. Tre eller fler är ett säkert sätt att tappa PageSpeed-poäng.
• Kontrollera stöd för kyrilliska: alla Google Fonts stöder inte ryska, öppna fliken Glyfer på typsnittssidan innan du väljer.
• Ladda typsnitten lokalt via en plugin eller manuell konvertering, så slipper du det externa Google-anropet och höjer dina poäng för Core Web Vitals.
• För WooCommerce, kontrollera siffrorna: "3", "5", "8" och "0" måste gå att skilja direkt i det valda snittet.

20 Bästa Google Fonts för WordPress och WooCommerce

1. Roboto

Det mest använda typsnittet från Google Fonts: ett neutralt mekaniskt skelett med öppna ovaler. Det drar inte uppmärksamheten från produkten och håller ihop självsäkert i små storlekar. Spannet av vikter från Thin till Black låter dig bygga hierarki med en enda familj.

• Fördelar: 12 vikter, läsbara siffror, tar inte över innehållet, felfri kyrilliska.
• Nackdelar: så spritt att utan ett särpräglat displaytypsnitt tappar sajten sin identitet.
• Här hittar du det: 🔗 Roboto på Google Fonts

2. Open Sans

En veteran inom webbtypografi med en vänlig design. Idealisk för bloggar, hjälpsektioner och långa produktbeskrivningar. Teckenmellanrummet är finjusterat så att texten inte "andas" på mobilen.

• Fördelar: perfekt läsbarhet för brödtext, förstklassig mobilanpassning, fullständig kyrilliska.
• Nackdelar: ser ut "som alla andra", lite svagt för ett varumärke som siktar på originalitet.
• Här hittar du det: 🔗 Open Sans på Google Fonts

3. Lato

En varm sans-serif i skärningspunkten mellan professionalism och mänsklighet. Halvt rundade avslut mjukar upp framtoningen utan att glida över i serieteckningsstil. Fungerar bra för företagssajter och butiker med en förtroendeingivande ton.

• Fördelar: balans mellan "strikt och vänligt", starkt i både rubriker och brödtext.
• Nackdelar: kurvorna krockar med geometriska teman och stela UI-kit.
• Här hittar du det: 🔗 Lato på Google Fonts

4. Montserrat

En geometrisk grotesk med en "urban" karaktär. Breda proportioner och en stor x-höjd gör att den sticker ut i heroblock och CTA-knappar. Parat med Roboto eller Inter ger den tydlig kontrast.

• Fördelar: omedelbart igenkännbar, djärv displaypersonlighet, 9 vikter.
• Nackdelar: inte för långa texter, breda bokstäver äter upp utrymme i mobillayouter.
• Här hittar du det: 🔗 Montserrat på Google Fonts

5. Poppins

En geometrisk grotesk byggd på perfekta cirklar, den ger en "modern SaaS-produkt"-look utan någon designeransträngning. Utmärkt för rubriker, knappar och prislappar. Presterar pålitligt i produktkort.

• Fördelar: ren geometrisk design, 9 snitt, "startup-känsla".
• Nackdelar: de rundade formernas enformighet blir tröttande i långa texter.
• Hämta här: 🔗 Poppins på Google Fonts

6. Inter

Ett typsnitt byggt för skärmar: hög x-höjd och omsorgsfulla sidomarginaler ger läsbarhet i små storlekar. De facto-standarden för gränssnitt, dashboards och WooCommerce-kassor.

• Fördelar: #1 i läsbarhet på skärm, felfri kyrilliska, variabel axel.
• Nackdelar: i en blogg utan ett kontrasterande rubriktypsnitt ser det intetsägande ut.
• Hämta här: 🔗 Inter på Google Fonts

7. Nunito

En rundad sans-serif med en mjuk, inbjudande personlighet. Perfekt för nischer som behöver värme: barnprodukter, djuraffärer, matbloggar. Kurvorna är välbalanserade.

• Fördelar: varm karaktär, full kyrillisk uppsättning, ser okej ut i mobila menyer.
• Nackdelar: inget för B2B, finans eller juridik; rundheten undergräver auktoritet.
• Hämta här: 🔗 Nunito på Google Fonts

8. Source Sans 3

Den tredje versionen av Adobes typsnitt, byggt med tillgänglighet i åtanke. Rena former och bekväm bokstavsmellanrum, bra för längre text. I WooCommerce fungerar det väl för produktbeskrivningar och filter.

• Fördelar: tillgänglighet direkt ur lådan, variabel viktaxel, 12 stilar.
• Nackdelar: utan ett kontrasterande rubriktypsnitt ser sajten ut som teknisk dokumentation.
• Hämta här: 🔗 Source Sans 3 på Google Fonts

9. Raleway

En elegant sans-serif med tunna linjer och en "premium"-känsla. Hero-sektioner och banners ser dyra ut. Inte lämpligt för brödtext: de tunna linjerna tappar kontrast på skärm.

• Fördelar: premium rubrikkaraktär, kyrilliska utan svaga punkter, variabel axel.
• Nackdelar: inte för brödtext, tunna linjer håller inte ihop bra i små storlekar.
• Hämta här: 🔗 Raleway på Google Fonts

10. Work Sans

En skärmanpassad grotesk med något bredare proportioner. Optimerad för läsning på bildskärm: den står sig bra vid 14px i brödtext och vid 48px i rubriker.

• Fördelar: en mångsidig allroundare för skärmläsning, variabel axel, 9 vikter.
• Nackdelar: neutral till osynlighetens gräns; utan ett distinkt displaytypsnitt ser det ut som en platshållare.
• Här hittar du det: 🔗 Work Sans på Google Fonts

11. Playfair Display

En serif med hög kontrast och en utpräglat "redaktionell" karaktär. I rubriker och banners ger den en känsla av glossy magasin: mode, smycken, parfym. Använd den inte för brödtext; de högkontrastiga linjerna flimrar på skärmen.

• Fördelar: redaktionell elegans, 6 vikter med kapitäler, fullständig kyrillisk.
• Nackdelar: inte för brödtext; i små storlekar försvinner de tunna linjerna.
• Här hittar du det: 🔗 Playfair Display på Google Fonts

12. Merriweather

En "läsbar" serif designad specifikt för skärmar. Till skillnad från de flesta serifer håller den en jämn linje även vid 14px. För bloggar och långa artiklar är det ett av de bästa serif-alternativen på Google Fonts.

• Fördelar: en skärmserif utan kompromisser, ren kyrillisk, variabel axel.
• Nackdelar: under 13px börjar seriferna bli "brusiga".
• Här hittar du det: 🔗 Merriweather på Google Fonts

13. PT Sans

Ett ParaType-projekt med fullt inhemsk kyrillisk och stöd för språk i Ryska federationen. Det här är inte en latinsk anpassning; det är ett typsnitt där kyrilliskan är förstemedborgare. Föredömliga proportioner för "ж", "д", "л" utan trånga partier.

• Fördelar: kyrillisk från dem som ritat alfabetet; smala proportioner sparar utrymme.
• Nackdelar: för få vikter för komplex hierarki; latinska tecken är sekundära.
• Här hittar du det: 🔗 PT Sans på Google Fonts

14. Ubuntu

Ubuntu OS varumärkestypsnitt, anpassat för webben. Distinkta knäckar i "a", "g" och "k" gör det igenkännbart. För teknikbutiker, mjukvara och webbhotell förmedlar det en teknikorienterad känsla.

• Fördelar: igenkännbar personlighet, teknisk känsla, 8 vikter.
• Nackdelar: det säregna "a" är inte för alla; kan vara irriterande i konservativa nischer.
• Här hittar du det: 🔗 Ubuntu på Google Fonts

15. Rubik

En grotesk med rundade hörn och en vänlig karaktär, men utan barnslig naivitet. Sweet spot för butiker som behöver värme utan infantilism: sportartiklar, heminredning, matlagning.

• Fördelar: balansen "värme utan naivitet", variabel axel, läsbara siffror.
• Nackdelar: saknar "torrheten" för strikta B2B-nischer.
• Var du laddar ner: 🔗 Rubik på Google Fonts

16. DM Sans

En geometrisk grotesk med låg kontrast. Utmärkt för landningssidor och single-page-sajter där allt ska kännas som en sammanhållen helhet.

• Fördelar: jämn kontrast över alla vikter, variabel axel, modern geometri.
• Nackdelar: monoton utan en display-accent; kyrilliskan är något bredare än latinet.
• Var du laddar ner: 🔗 DM Sans på Google Fonts

17. Fira Sans

Ett typsnitt designat för Firefox OS. Kompakta proportioner sparar horisontellt utrymme, ett plus för produktkort med långa namn och mobila layouter.

• Fördelar: kompakthet, utrymmesbesparing, variabel axel, 16 vikter.
• Nackdelar: "torrheten" passar inte för emotionella nischer, läsbarheten sjunker vid storlekar under 12px.
• Var du laddar ner: 🔗 Fira Sans på Google Fonts

18. Libre Franklin

En tolkning av klassiska Franklin Gothic för webben. Hög x-höjd och en igenkännbar "amerikansk" design; rubriker ser ut som tidningsstrippar utan att kännas ålderdomliga.

• Fördelar: distinkt "tidningsstil", variabel axel, 9 vikter.
• Nackdelar: kyrilliskan är något smalare än latinet, inte för "luftig" design.
• Var du laddar ner: 🔗 Libre Franklin på Google Fonts

19. Quicksand

En rundad geometrisk grotesk med öppna, "andande" former. Bokstavsmellanrummet är något ökat, så att ögat inte "snubblar". För barnbutiker, hobbybutiker och kreativa studior.

• Fördelar: öppna former, vänlig karaktär, variabel axel.
• Nackdelar: inte för stora textblock, malplacerad i strikta nischer.
• Var du laddar ner: 🔗 Quicksand på Google Fonts

20. Crimson Text

Gammaldags serif inspirerad av boktypografi. Till skillnad från högkontrastiga Playfair Display håller Crimson Text en jämn linje och fungerar även för brödtext. För bloggar om litteratur, historia och "långsamt" innehåll.

• Fördelar: kompromisslös bokserif, 6 vikter, kapitäler.
• Nackdelar: inte för kommersiellt bruk, för mycket "bibliotekskaraktär".
• Här hittar du den: 🔗 Crimson Text på Google Fonts

⁉️🤔 FAQ

Passar Google Fonts för en WooCommerce-butik på ryska?

Ja. Google Fonts-katalogen innehåller hundratals typsnitt med fullt stöd för kyrilliska: Roboto, Inter, Open Sans, PT Sans och minst 60 fler familjer. Nyckeln är att öppna fliken Glyfer och kontrollera den kyrilliska sektionen. För WooCommerce, testa siffrorna "3", "5", "8" och "0" i Bold innan du installerar.

Hur många typsnitt kan jag ladda utan att försämra prestandan?

Sweet spot är två familjer: en för rubriker, en för brödtext. Varje extra vikt lägger till kilobyte i nyttolasten. Roboto Bold + Inter Regular väger cirka 70 KB i WOFF2, och sidan laddar utan problem. Tre eller fler familjer är ett säkert sätt att tappa PageSpeed-poäng.

Är det obligatoriskt att hosta typsnitten lokalt istället för att använda Googles CDN?

Inte obligatoriskt, men rekommenderat. Lokal inläsning via @font-face eliminerar en extern DNS-uppslagning och förbättrar Core Web Vitals-poängen. GTmetrix-tester visar en besparing på 300-600 ms vid första renderingen. Mer information i den dedicerade guiden.

Vilket typsnitt fungerar bäst för mobilversionen av en butik?

Inter. Dess höga x-höjd och tajta teckenmellanrum gör det till det mest läsbara valet på 5-6 tums skärmar. För mobiltrafik, använd Inter för brödtext och Montserrat Bold för rubriker, detta par fungerar kompromisslöst.

Kan jag blanda serif och sans-serif på samma sida?

Det kan du och det bör du. En "sans heading + serif body"-kombination (Montserrat + Merriweather) skapar visuell kontrast. Det omvända schemat (Playfair Display + Inter) ger en premiumkänsla. Undvik tre eller fler familjer, sidan förvandlas till en röra.

Sammanfattning: vilket Google Font du ska välja för ditt användningsfall

Att välja ett typsnitt är inte en smakfråga, det är en fråga om användningsfallet. Ett felmatchat "rubrik + brödtext"-par sänker konverteringen utan att besökaren ens märker det.

• Onlinebutik (WooCommerce) → Inter (brödtext) + Montserrat Bold (rubriker). Läsbara priser, ren kassa, slagkraftiga produktkort.
• Blogg / innehållssajt → Open Sans (brödtext) + Raleway (rubriker). Open Sans tröttar inte ut vid långläsning, Raleway ger en lätt touch.
• Landningssida / single page → Poppins (rubriker) + DM Sans (brödtext). Geometrisk tydlighet från heroblock till knapp.
• Premium / mode → Playfair Display (rubriker) + Inter (brödtext). Redaktionell elegans utan att offra läsbarhet.
• Ryskspråkigt projekt → PT Sans (brödtext och rubriker). Naturlig kyrillisk, inte anpassad latinsk.

Jaga inte ett högt antal vikter, ladda bara de du faktiskt använder: Bold för rubriker, Regular för brödtext, Italic för betoning. Och se till att hosta typsnitten lokalt, de extra 600 ms väntan på Googles CDN är inte värt en förlorad besökare.