🔤 20 Google-fonttia WordPressille ja WooCommercelle: paritukset, kyrilliset ja nopeus vuonna 2026

Sivusto latautuu kolmessa sekunnissa, mutta kävijä lähtee kahden jälkeen. Yhdeksässä tapauksessa kymmenestä ongelma ei ole hosting eikä lisäosat, ongelma on fontti. Huono "otsikko + leipäteksti" -pari tuhoaa luettavuuden, ja neljä kirjasinperhettä kahdeksalla leikkauksella kullakin pudottavat PageSpeedin alle 50:n.

Google Fonts, yli 1 700 ilmaisen webfontin katalogi. Toimivan yhdistelmän valitseminen WordPressiin ja WooCommerceen on tehtävä, jossa on koukku: jotkin hajoavat mobiilissa, jotkin eivät toimi kyrillisten aakkosten kanssa, ja jotkin lataavat 400 kt per leikkaus.

Käytimme katalogin läpi ja poimimme 20 fonttia, jotka eivät petä. Jokaisesta rehelliset hyvät ja huonot puolet sekä valmis pari verkkokauppaan tai blogiin.

💡 Nopea yleiskatsaus:

• Määrittele brändisi sävy: tiukka sans-serif teknologiaan ja talouteen, lämmin pyöristetty lasten- ja lifestyle-projekteihin, serif sisältöpainotteisille sivustoille.
• Rajoita kirjasinperheiden määrä: yksi otsikoille, yksi leipätekstille. Kolme tai enemmän on varma tapa menettää PageSpeed-pisteitä.
• Tarkista kyrillinen tuki: kaikki Google Fontsit eivät tue venäjää, avaa Glyphs-välilehti fontin sivulla ennen valintaa.
• Lataa fontit paikallisesti lisäosan tai manuaalisen muunnoksen avulla, jolloin poistat ulkoisen Google-pyynnön ja parannat Core Web Vitals -pisteitäsi.
• WooCommercessa tarkista numerot: "3", "5", "8" ja "0" on erotuttava toisistaan välittömästi valitulla leikkauksella.

20 Parasta Google Fonts -fonttia WordPressille ja WooCommercelle

1. Roboto

Käytetyin Google Fonts -kirjaintyyppi: neutraali mekaaninen runko ja avoimet ovaalit. Se ei vie huomiota tuotteelta ja kestää varmasti pienissäkin koossa. Painosten kirjo Thinistä Blackiin antaa sinun rakentaa hierarkian yhdellä kirjainperheellä.

• Hyvää: 12 painosta, luettavat numerot, ei peitä sisältöä alleen, virheetön kyrillinen tuki.
• Huonoa: niin laajalle levinnyt, että ilman erottuvaa otsikkokirjainta sivusto menettää identiteettinsä.
• Mistä saat sen: 🔗 Roboto Google Fontsissa

2. Open Sans

Verkkotypografian veteraani, jossa on ystävällinen muotoilu. Ihanteellinen blogeihin, ohjeosioihin ja pitkiin tuotekuvauksiin. Kirjainvälistys on säädetty niin, ettei teksti "hengitä" mobiilissa.

• Hyvää: täydellinen leipätekstin luettavuus, ensiluokkainen mobiilitoisto, täysi kyrillinen tuki.
• Huonoa: näyttää "kaikkien muiden kaltaiselta", hieman heikko brändille, joka tavoittelee omaperäisyyttä.
• Mistä saat sen: 🔗 Open Sans Google Fontsissa

3. Lato

Lämmin sans-serif ammattimaisuuden ja inhimillisyyden risteyksessä. Puoliksi pyöristetyt päätteet pehmentävät viestiä lipsumatta sarjakuvamaisuuteen. Toimii hyvin yrityssivustoilla ja verkkokaupoissa, joissa tavoitellaan luotettavaa sävyä.

• Hyvää: "tiukan ja ystävällisen" tasapaino, vahva sekä otsikoissa että leipätekstissä.
• Huonoa: kaaret törmäävät geometristen teemojen ja jäykkien UI-kittien kanssa.
• Mistä saat sen: 🔗 Lato Google Fontsissa

4. Montserrat

Geometrinen groteski, jossa on "urbaani" luonne. Leveät mittasuhteet ja suuri x-korkeus saavat sen erottumaan hero-lohkoissa ja toimintakehotuspainikkeissa. Yhdistettynä Roboton tai Interin kanssa se tuottaa selkeän kontrastin.

• Hyvää: heti tunnistettava, rohkea otsikkopersoonallisuus, 9 painosta.
• Huonoa: ei pitkälle tekstille, leveät kirjaimet syövät tilaa mobiiliasetteluissa.
• Mistä saat sen: 🔗 Montserrat Google Fontsissa

5. Poppins

Täydellisiin ympyröihin perustuva geometrinen groteski, joka antaa "modernin SaaS-tuotteen" ilmeen ilman suunnittelijan vaivannäköä. Loistava otsikoihin, painikkeisiin ja hintalappuihin. Toimii luotettavasti tuotekorteissa.

• Hyödyt: puhdas geometrinen muotoilu, 9 leikkausta, "startup-fiilis".
• Haitat: pyöreiden muotojen yksitoikkoisuus väsyttää pitkissä teksteissä.
• Mistä saat: 🔗 Poppins Google Fontsissa

6. Inter

Näytöille rakennettu fontti: korkea x-korkeus ja huolelliset sivuvälistykset tuovat luettavuutta pienissä koossa. Käytännön standardi käyttöliittymiin, hallintapaneeleihin ja WooCommerce-kassalle.

• Hyödyt: #1 luettavuus ruudulla, virheetön kyrillinen tuki, muuttuva akseli.
• Haitat: blogissa ilman kontrastoivaa otsikkofonttia se näyttää lattealta.
• Mistä saat: 🔗 Inter Google Fontsissa

7. Nunito

Pehmeä, kutsuva pyöreäpäätteinen sans-serif. Täydellinen lämpöä kaipaaviin aiheisiin: lastentuotteet, lemmikkikaupat, ruokablogit. Kaaret ovat hyvin tasapainossa.

• Hyödyt: lämmin luonne, täysi kyrillinen tuki, näyttää kelvolliselta mobiilivalikoissa.
• Haitat: ei sovi B2B:hen, rahoitusalalle tai juridiikkaan; pyöreys syö auktoriteettia.
• Mistä saat: 🔗 Nunito Google Fontsissa

8. Source Sans 3

Adoben kirjaintyypin kolmas julkaisu, rakennettu saavutettavuus edellä. Puhtaat muodot ja miellyttävä kirjainvälistys, hyvä pitkiin teksteihin. WooCommercessa toimii hyvin tuotekuvauksissa ja suodattimissa.

• Hyödyt: saavutettavuus valmiina, muuttuva painoakseli, 12 tyyliä.
• Haitat: ilman kontrastoivaa otsikkofonttia sivusto näyttää tekniseltä dokumentaatiolta.
• Mistä saat: 🔗 Source Sans 3 Google Fontsissa

9. Raleway

Elegantti sans-serif ohuilla viivoilla ja "premium"-tuntumalla. Hero-kuvat ja bannerit näyttävät kalliilta. Ei sovi leipätekstiin: ohuet viivat menettävät kontrastin ruudulla.

• Hyödyt: premium-otsikkoluonne, kyrillinen ilman heikkouksia, muuttuva akseli.
• Haitat: ei leipätekstiin, ohuet viivat eivät kestä hyvin pienissä koossa.
• Mistä saat: 🔗 Raleway Google Fontsissa

10. Work Sans

Näyttö edellä suunniteltu groteski, jossa on hieman leveämmät mittasuhteet. Optimoitu lukemiseen monitorilta: se pitää pintansa 14 pikselin leipätekstissä ja 48 pikselin otsikoissa.

• Hyödyt: monipuolinen ruudulta luettava yleisfontti, Variable-akseli, 9 leikkausta.
• Haitat: neutraali näkymättömyyteen asti; ilman erottuvaa otsikkofonttia se näyttää paikanvaraajalta.
• Mistä saat sen: 🔗 Work Sans Google Fontsissa

11. Playfair Display

Korkeakontrastinen antiikva, jossa on korostunut "toimituksellinen" luonne. Otsikoissa ja bannereissa se tuo kiiltävälehtisen tunnelman: muoti, korut, hajuvedet. Älä käytä sitä leipätekstiin; korkeakontrastiset viivat väreilevät ruudulla.

• Hyödyt: toimituksellista eleganssia, 6 leikkausta ja kapiteelit, täysi kyrillinen tuki.
• Haitat: ei leipätekstiin; pienissä koossa ohuet viivat katoavat.
• Mistä saat sen: 🔗 Playfair Display Google Fontsissa

12. Merriweather

"Luettava" antiikva, joka on suunniteltu nimenomaan ruudulle. Toisin kuin useimmat antiikvat, se säilyttää tasaisen linjan jopa 14 pikselin koossa. Blogeihin ja pitkiin artikkeleihin yksi parhaista antiikvavaihtoehdoista Google Fontsissa.

• Hyödyt: kompromissiton ruutuantiikva, selkeä kyrillinen, Variable-akseli.
• Haitat: alle 13 pikselissä päätteet alkavat "säristä".
• Mistä saat sen: 🔗 Merriweather Google Fontsissa

13. PT Sans

ParaTypen projekti, jossa on täysin natiivi kyrillinen tuki ja tuki Venäjän federaation kielille. Tämä ei ole latinalainen sovitus, vaan kirjaintyyppi, jossa kyrillinen on ensisijainen. Esimerkilliset mittasuhteet "ж", "д", "л" -kirjaimille ilman ahtaita kohtia.

• Hyödyt: kyrillinen aakkoston suunnitelleilta ihmisiltä; kapeat mittasuhteet säästävät tilaa.
• Haitat: liian vähän leikkauksia monimutkaiseen hierarkiaan; latinalainen on toissijainen.
• Mistä saat sen: 🔗 PT Sans Google Fontsissa

14. Ubuntu

Ubuntu-käyttöjärjestelmän brändifontti, joka on sovitettu verkkoon. Tunnusomaiset taitteet "a", "g" ja "k" -kirjaimissa tekevät siitä tunnistettavan. Laitekaupoille, ohjelmistoille ja hosting-palveluille se tuo teknologiahenkisen tunnelman.

• Hyödyt: tunnistettava persoonallisuus, teknofiilis, 8 leikkausta.
• Haitat: omintakeinen "a" ei sovi kaikille; voi ärsyttää konservatiivisissa markkinaraoissa.
• Mistä saat sen: 🔗 Ubuntu Google Fontsissa

15. Rubik

Pyöristetyillä kulmilla ja ystävällisellä luonteella varustettu groteski, josta kuitenkin puuttuu lapsellinen naiivius. Täydellinen valinta verkkokauppoihin, jotka tarvitsevat lämpöä ilman lapsekkuutta: urheiluvälineet, kodin tuotteet, ruoanlaitto.

• Hyvää: "lämpöä ilman naiiviutta" -tasapaino, muuttuva akseli, luettavat numerot.
• Huonoa: "kuivuuden" puute tiukkoja B2B-aloja varten.
• Mistä ladata: 🔗 Rubik Google Fontsissa

16. DM Sans

Geometrinen groteski, jossa on matala kontrasti. Loistava laskeutumissivuille ja yhden sivun sivustoille, joilla kaiken tulisi tuntua yhtenäiseltä kokonaisuudelta.

• Hyvää: tasainen kontrasti kaikissa paksuuksissa, muuttuva akseli, moderni geometria.
• Huonoa: yksitoikkoinen ilman display-korostusta; kyrilliset kirjaimet ovat hieman latinalaisia leveämpiä.
• Mistä ladata: 🔗 DM Sans Google Fontsissa

17. Fira Sans

Firefox OS:ää varten suunniteltu kirjaintyyppi. Tiiviit mittasuhteet säästävät vaakasuuntaista tilaa, mikä on etu tuotekorteille, joissa on pitkiä nimiä, ja mobiiliasetteluille.

• Hyvää: tiiviys, tilansäästö, muuttuva akseli, 16 leikkausta.
• Huonoa: "kuivuus" ei sovi tunnevaltaisiin aloihin, luettavuus heikkenee alle 12 pikselin koossa.
• Mistä ladata: 🔗 Fira Sans Google Fontsissa

18. Libre Franklin

Klassisen Franklin Gothicin tulkinta verkkoon. Korkea x-korkeus ja tunnistettava "amerikkalainen" muotoilu; otsikot näyttävät sanomalehtien palstoilta tuntumatta vanhanaikaisilta.

• Hyvää: erottuva "sanomalehtityyli", muuttuva akseli, 9 leikkausta.
• Huonoa: kyrilliset kirjaimet ovat hieman latinalaisia kapeampia, ei sovi "ilmavaan" muotoiluun.
• Mistä ladata: 🔗 Libre Franklin Google Fontsissa

19. Quicksand

Pyöristetty geometrinen groteski, jossa on avoimet, "hengittävät" muodot. Kirjainväli on hieman suurennettu, joten katse ei "kompastu". Lastentarvikekauppoihin, harrasteliikkeisiin ja luoviin studioihin.

• Hyvää: avoimet muodot, ystävällinen luonne, muuttuva akseli.
• Huonoa: ei sovi suurille tekstimassoille, paikaton tiukoissa aloissa.
• Mistä ladata: 🔗 Quicksand Google Fontsissa

20. Crimson Text

Vanhan ajan antiikva, joka on saanut vaikutteita kirjatypografiasta. Toisin kuin voimakaskontrastinen Playfair Display, Crimson Text pitää linjan tasaisena ja toimii myös leipätekstissä. Sopii kirjallisuutta, historiaa ja "hidasta" sisältöä käsitteleviin blogeihin.

• Edut: tinkimätön kirja-antiikva, 6 leikkausta, kapiteelit.
• Haitat: ei kaupalliseen käyttöön, luonteeltaan liian "kirjastomainen".
• Mistä saat sen: 🔗 Crimson Text Google Fontsissa

⁉️🤔 UKK

Sopivatko Google Fontsit venäjänkieliseen WooCommerce-verkkokauppaan?

Kyllä. Google Fonts -valikoima sisältää satoja fontteja, joissa on täysi kyrillinen tuki: Roboto, Inter, Open Sans, PT Sans ja vähintään 60 muuta perhettä. Olennaista on avata Glyphs-välilehti ja tarkistaa kyrillinen osio. WooCommercessa testaa numerot "3", "5", "8" ja "0" lihavoituna ennen asennusta.

Kuinka monta fonttia voin ladata heikentämättä suorituskykyä?

Optimi on kaksi perhettä: yksi otsikoille, yksi leipätekstille. Jokainen ylimääräinen leikkaus lisää kilotavuja sivulataukseen. Roboto Bold + Inter Regular painavat noin 70 kt WOFF2-muodossa, ja sivu latautuu ilman notkahdusta. Kolme tai useampi perhe on varma tapa menettää PageSpeed-pisteitä.

Onko pakko isännöidä fontit paikallisesti Google CDN:n käytön sijaan?

Ei pakollista, mutta suositeltavaa. Paikallinen lataus @font-face-määrityksellä poistaa ulkoisen DNS-haun ja parantaa Core Web Vitals -pisteitä. GTmetrix-testit osoittavat 300-600 ms säästön ensimaalauksessa. Lisätietoja omistetussa oppaassa.

Mikä fontti toimii parhaiten kaupan mobiiliversiossa?

Inter. Sen korkea x-korkeus ja tiivis välistys tekevät siitä luettavimman valinnan 5-6 tuuman näytöillä. Mobiililiikenteelle käytä Interiä leipätekstissä ja Montserrat Boldia otsikoissa, tämä pari toimii kompromissitta.

Voinko sekoittaa serif- ja sans-serif-fontteja samalla sivulla?

Voit, ja se on suositeltavaa. "Sans-otsikko + serif-teksti" -yhdistelmä (Montserrat + Merriweather) luo visuaalista kontrastia. Käänteinen kaava (Playfair Display + Inter) antaa premium-tuntuman. Vältä kolmea tai useampaa perhettä, sivu muuttuu sekamelskaksi.

Yhteenveto: mikä Google Font valita käyttötapaukseesi

Fontin valinta ei ole makuasia, vaan käyttötapauskysymys. Yhteensopimaton "otsikko + teksti" -pari leikkaa konversiota kävijän sitä edes huomaamatta.

• Verkkokauppa (WooCommerce) → Inter (teksti) + Montserrat Bold (otsikot). Luettavat hinnat, selkeä kassa, näyttävät tuotekortit.
• Blogi / sisältösivusto → Open Sans (teksti) + Raleway (otsikot). Open Sans ei väsytä pitkissä luvuissa, Raleway tuo kevyttä ilmettä.
• Laskeutumissivu / yksisivuinen → Poppins (otsikot) + DM Sans (teksti). Geometrista selkeyttä hero-lohkosta painikkeeseen.
• Premium / muoti → Playfair Display (otsikot) + Inter (teksti). Toimituksellista eleganssia luettavuudesta tinkimättä.
• Venäjänkielinen projekti → PT Sans (teksti ja otsikot). Natiivi kyrillinen, ei sovitettu latinalainen.

Älä jahda suurta leikkausmäärää, lataa vain ne, joita oikeasti käytät: Bold otsikoihin, Regular tekstiin, Italic korostukseen. Ja muista isännöidä fontit paikallisesti, 600 ms ylimääräinen odotus Googlen CDN:llä ei ole menetetyn kävijän arvoinen.