Vaikefondi reetmine annab WordPressi saidi esmapilgul ära. Süsteemne kirjatüüp karjub „ma ei seadistanud midagi" valjemini kui ükski tasuta mall.

Fondi vahetamine võtab kümme minutit. Sa ei pea olema front-end arendaja ega maksma. Alljärgnevad viis meetodit katavad kõik: algajatest, kes kardavad koodi puutuda, kuni saidiomanikeni, kes vajavad täielikku kontrolli.

Oleme kokku kogunud 2026. aasta seisuga toimivad meetodid. Alates halvimast lähenemisest, mida vananenud juhendid endiselt soovitavad, kuni kanoonilise „WordPressi viisini".

💡 Kiirülevaade:

• Vali font: Google Fonts (tasuta, 1500+ kirjatüüpi), Adobe Fonts (Creative Cloudi tellimus) või laadi oma WOFF2 fail oma serverisse.
• Otsusta, kas vajad pluginat (lihtsam, kohandaja liides) või käsitsi ühendamist functions.php kaudu (puhtam, kiirem, sõltuvuseta kolmanda osapoole koodist).
• Käsitsi meetodi puhul: lisa functions.php faili wp_enqueue_style ja CSS-i font-family.
• Plugina meetodi puhul: paigalda EasyFonts või Use Any Font, vali kirjatüüp ja salvesta.
• Testi tulemust erinevates brauserites ja mobiilis: iga lisatud font lisab lehe laadimisele 50-200 KB.

Miks üldse oma saidi fonte vahetada

Font kujundab esmamulje kiiremini kui värvid või pildid. Michigani ülikooli teadlased näitasid juba 2008. aastal, et keerulises fondis tekst tajutakse alateadlikult „raskena". Lugejad järgivad juhiseid väiksema tõenäosusega ja hindavad ülesande täitmiseks kuluvat aega üle.

Ka serif või sans-serif loeb. Serif-kirjatüübid (Georgia, Merriweather) pikendavad lugemisaega, kuid suurendavad tajutavat autoriteetsust. Sans-serif fondid (Roboto, Inter) kiirendavad lugemist ja toimivad paremini mobiiliekraanidel. See ei ole oletus: tüpograafia psühholoogia uuringute ülevaade kinnitab seda mõju praktikas.

WordPressi saidi puhul lahendab õige font kolm probleemi:

• Brändi eristumine. Unikaalne pealkirjafont hoiab ära selle, et su sait näeb välja nagu „järjekordne blogi tavalise teemaga".
• Loetavus. Õige suurus, reavahe ja kontrastsus vähendavad põrkemäära.
• Visuaalne hierarhia. Erinevad kirjatüübid pealkirjade ja sisuteksti jaoks juhivad külastaja pilku.

Nüüd asume asja juurde.

Kust saada fonte WordPressi jaoks

Allikaid on kolm: Google Fonts, Adobe Fonts ja isemajutamine. Vaatame igaüht lähemalt.

Google Fonts: tasuta ja registreerimist ei nõuta

Kõige ilmsem allikas. Üle 1500 fondi, avatud litsents, vahemällu salvestamine Google'i CDN-i kaudu. Sobib 95% saitidele.

Mine aadressile fonts.google.com. Liides tervitab sind fondinäidiseid kuvavate kaartide ruudustikuga.

Filtrid asuvad vasakul. Filtreerida saab kategooria (Serif, Sans Serif, Display, Handwriting, Monospace), keele, stiilide arvu ja paksuse järgi. Filtrid rakenduvad koheselt ja tulemused uuenevad ilma lehte uuesti laadimata.

Liigu kursori fondi kohale, et näha menüüd näidisteksti muutmiseks. Sisesta oma pealkiri või lõik ja vaata, kuidas see välja näeb.

Klõpsa „View specimen", et avada fondi leht kõigi stiilide, märgistiku tabeli ja erinevas suuruses näidistega.

Kui font meeldib, klõpsa kaardi nurgas oleval punasel plussil. Font liigub ekraani allservas olevasse kogumispaneeli. Saad lisada mitu fondiperet: ühe pealkirjade, teise sisuteksti jaoks.

Laienda kogumispaneeli, et näha vahekaarte „Embed" ja „Customize".

Vahekaardil „Customize" vali vajalikud stiilid. Oluline: ära märgi kõike. Iga stiil on lisafail, mille brauser laadib. Tüüpilise saidi jaoks piisab Regular (400) ja Bold (700), mõnikord ka Italic. Kiiruse indikaator paremas ülanurgas näitab, kui palju font laadimist aeglustab.

Kui teie sait kasutab muud kui ladina tähestikku, valige lehe allservas sobiv märgistik. Kirillitsa puhul on selleks Cyrillic.

Kaks noolenuppu üleval: vasakpoolne jagab kollektsiooni, parempoolne laadib fondifailid teie arvutisse. Kasulik Photoshopi jaoks või kui otsustate fonti ise majutada.

Adobe Fonts (endine Typekit)

Kui teil on Creative Cloudi tellimus, annab Adobe Fonts juurdepääsu professionaalsetele kirjatüüpidele nagu Futura, Minion Pro ja Myriad. Fondid ühendatakse CSS-i kaudu, sarnaselt Google Fontsile. Creative Cloudi tasuta pakett sisaldab põhikomplekti, mis on enamiku projektide jaoks piisav.

Kohandatud fondid WOFF2-vormingus

Ostsite litsentsitud fondi või laadisite tasuta fondi alla saidilt Font Squirrel? Teisendage see WOFF2-vormingusse (kaasaegne veebifondivorming, Brotli pakkimine, toetatud 97% brauserite poolt) ja laadige oma serverisse. Eelis: puudub sõltuvus kolmanda osapoole CDN-ist ja see on GDPR-iga kooskõlas. Puudus: font laaditakse teie serverist, mis on paratamatult aeglasem kui Google'i CDN.

5 Viisi kohandatud fontide lisamiseks WordPressi

On täpselt viis viisi. Liigume valikust „ära tee seda" ideaalse WordPressi meetodi juurde.

1. Meetod: CSS @import (ära tee seda)

Google Fonts pakub @import vahekaarti koos valmis CSS-stringiga. See tundub mugav: kopeeri, kleebi, valmis.

Tehniliselt läheb kood sinu alamteema style.css faili algusesse:

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 */

Miks on see halvim variant? @import takistab brauseril mitut stiililehte paralleelselt laadida. Brauser laadib alla CSS-faili, näeb seal sees @import käsku ja alles seejärel hangib fondi. Järjestikune laadimine paralleelse asemel tähendab 200-400 ms kaotust fondi kohta. Mobiilis on see kriitiline.

Ära kasuta @import käsku fontide jaoks. Mitte kunagi.

2. Meetod: lingisildi lisamine header.php faili

Fonditeegid pakuvad <link> silti sisestamiseks <head> sektsiooni. Sa võid selle paigutada otse header.php faili, mallifaili, mis on igal WordPressi teemal.

Paiguta <link> silt <head> ja </head> siltide vahele. Kui töötad alamteemaga, kopeeri header.php ülemteemast alamteemasse ja muuda seda seal.

See meetod töötab, kuid on habras: teemauuendused kirjutavad sinu muudatused üle, kui sa ei kasuta alamteemat. Lisaks on sisu ja koodi segamine mallides halb tava. Sobib ühekordseks eksperimendiks, mitte püsivaks kasutamiseks.

3. Meetod: @font-face ja fontide isemajutamine

Kui font on sinu serveris, pead selle deklareerima, kasutades @font-face direktiivi oma stiililehes. Esmalt lae fondifailid (WOFF2, WOFF) FTP kaudu üles oma alamteema kausta, näiteks wp-content/themes/yourtheme-child/fonts/.

Seejärel lisa style.css faili:

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
}

Parameeter font-display: swap on oluline: see ütleb brauserile, et kuvaks teksti esmalt süsteemse fondiga ja seejärel vahetaks selle kohandatud fondi vastu, kui see laaditud on. Ilma selleta näevad külastajad fondi laadimise ajal tühja ekraani.

Ära unusta asendada fondi nime ja teed. Kui sinu lähtefail on TTF või OTF, teisenda see WOFF2 formaati, kasutades Font Squirrel online converterit.

See meetod annab täieliku kontrolli, kuid kaotab Google Fontsile kiiruses: sinu server on peaaegu kindlasti aeglasem kui Google'i CDN. Kuni 10 000 külastajaga saitide puhul kuus on erinevus märkamatu. Suure liiklusega projektide puhul on see kriitiline.

4. Meetod: functions.php ja wp_enqueue_style (kanooniline WordPressi viis)

WordPressi arhitektuuri seisukohast kõige korrektsem meetod. Selle asemel, et koodi malli sisestada, „enqueue'id" sa fondiga stiililehe wp_enqueue_scripts konksu kaudu.

Kood läheb aktiivse teema või alamteema functions.php faili. Siin on töötav näide Google Fontsi jaoks:

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' );

Funktsioon wp_enqueue_style võtab neli parameetrit: unikaalne nimi (handle), stiililehe URL, sõltuvuste massiiv (siin tühi) ja versioon (null, WordPress asendab selle oma versiooniga). wp_enqueue_scripts konks tagab, et kood käivitatakse lehe laadimise ajal õigel hetkel.

Adobe fontide puhul kasutati varem JavaScripti ja wp_enqueue_script funktsiooni. Nüüd on Adobe Fonts üle läinud Google Fontsiga sarnasele CSS-lähenemisele, seega katab wp_enqueue_style mõlemat teenust.

Miks see on parim käsitsi meetod:

• Fonte ei kirjutata teemauuenduste käigus üle (kui oled alamteemas).
• WordPress haldab laadimisjärjekorda ja lahendab sõltuvused.
• Kood on isoleeritud functions.php failis, mallid jäävad puhtaks.
• Teised pluginad saavad sinu väljakutse standardkonksude kaudu keelata või muuta.

5. Meetod: plugin (kui sa ei taha koodi puutuda)

Ei ole valmis functions.php faili sukelduma? Plugin lahendab probleemi ilma ühegi koodireata.

Easy Google Fonts (visuaalne näide, kuid mitte tootmissaitidele)

Vanim fondiplugin WordPressi kataloogis. Pakub kohandaja liidest: vali font, näe muudatusi reaalajas, salvesta.

Paigaldamine on standardne: Plugins → Add New → otsi „Easy Google Fonts" → Install → Activate.

Pärast aktiveerimist ilmub Appearance → Customize alla uus „Typography" üksus. Sisene sinna, vali Typography Default ja näed fondi juhtelemente lõikude ja pealkirjade jaoks.

Klõpsa rippmenüüd elemendi kõrval, mida soovid muuta. Menüü avaneb:

Kõige olulisem valik on Font Family. Siin on sul juurdepääs kogu Google Fontsi teegile (600+ kirjatüüpi). Fondid on grupeeritud kategooriate kaupa: serif, sans-serif, Display, Handwriting, Monospace. Saad otsida nime järgi.

Klõpsa fondil ja muutused on kohe nähtavad paremal asuvas eelvaates.

Järgmisena tuleb peenhäälestus. Vahekaart Font Weight/Style juhib paksust. Text Decoration lisab allajoonimise, läbikriipsutuse või ülajoone. Text Transform muudab tõstut: suurtähed, väiketähed või sõna algustähe suureks.

Vahekaardil Appearance: fondi värv, taustavärv, suurus, reavahe ja tähevahe.

Vahekaart Positioning: veerised, polsterdus, äärised, äärise raadius ja kuvamisomadus (display).

Kui valmis, klõpsa üleval Save and Publish.

Aus hoiatus: Easy Google Fontsi pole uuendatud alates 2020. aastast. WordPress 6.4+ puhul ei pruugi plugin töötada. Mõned kasutajad kurdavad, et kohandajas ei ilmu valikut „Typography". Näitame seda lähenemise illustratsioonina: enamik fondipluginaid töötab sama kohandaja mehhanismi kaudu.

Mida teha, kui font ei muutu

Mõned teemad kasutavad mittestandardseid CSS-i selektoreid. Pealkiri ei pruugi olla lihtsalt <h1>, vaid <h1 class="entry-title"> ja plugin „ei näe" seda elementi.

Lahendus: loo oma fondijuhtelement menüüs Settings → Google Fonts.

Seo uue juhtelemendiga vajalik CSS-i selektor ja luba jõuga ülekirjutamine (force override). Pärast salvestamist ilmub juhtelement kohandajasse koos standardsetega.

Alternatiivsed pluginad (ajakohased 2026. aastal)

Easy Google Fonts pole ainus võimalus. Kolm toimivat alternatiivi:

• EasyFonts majutab Google Fontse lokaalselt sinu serveris. See tuvastab automaatselt kasutusel olevad fondid, laadib need alla ja serveerib neid sinu domeenilt. Kiirem kui standardsed CDN-päringud, lisaks täielik GDPR-i vastavus. Kolmest kõige kergem jõudlusmõju poolest.
• Use Any Font võimaldab üles laadida oma fonte ilma CSS-ita. Plugin teisendab TTF/OTF/WOFF veebiformaati ja majutab neid sinu serveris. Sobib litsentsi alusel ostetud kommertsfontidele.
• Fonts Plugin on alternatiivne Google Fontsi haldur koos kohandaja eelvaatega. Erinevalt aegunud Easy Google Fontsist uuendatakse seda regulaarselt ja testitakse praeguste WordPressi versioonidega.

Fondi rakendamine saidi elementidele

Font on ühendatud, kuid „ripub endiselt õhus". Pead brauserile ütlema, millistele elementidele seda rakendada.

Siin on lihtne CSS pealkirja fondi asendamiseks. Lisa see menüü Appearance → Customize → Additional CSS kaudu:

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

Leiuteksti jaoks:

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

Oluline nüanss: fondi nimi atribuudis font-family peab täpselt vastama sellele, kuidas teek selle deklareerib. Google Fonts kasutab 'Roboto', samas kui Adobe Fonts võib tagastada 'open-sans' (ilma tühikuta ja ilma jutumärkideta). Vaadake hoolikalt teenuse pakutavat koodi, mitte fondi nime veebisaidil.

Seda CSS-i saate lisada kolmel viisil: kohandaja kaudu (lihtsaim, säilib teemavärskenduste korral), alamteema style.css faili kaudu või wp_head konksu kaudu. Soovitame esimest.

⁉️🤔 Korduma kippuvad küsimused

Kui palju fonte saab saidile lisada ilma kiirust kaotamata?

Optimaalselt kaks kirjastiili perekonda: üks pealkirjadele, üks sisutekstile. Iga lisafont lisab ühe HTTP-päringu ja 50-200 KB lehe kaalu. Kolm fonti on juba lagi. Ning ühenda ainult vajalikud laadid: Regular (400) ja Bold (700) kaaluvad poole vähem kui 5-6 laadiga komplekt.

Google Fonts või Adobe Fonts: kumba valida?

9 juhul 10-st on vastus Google Fonts. Tasuta, kiire (Google CDN), üle 1500 fondi, kirillitsa tugi on peaaegu kõigil populaarsetel kirjastiilidel olemas. Adobe Fonts on mõttekas, kui sul on juba Creative Cloudi tellimus ja vajad kindlat kommertsfonti nagu Futura või Minion Pro.

Kas arvutist alla laaditud TTF-faili saab kasutada?

Saab küll, kuid esmalt teisenda see WOFF2-vormingusse (kaasaegne tihendatud veebiformaat). TTF-failid on tihendamata ja võtavad oluliselt rohkem ruumi. WOFF2 koos Brotli tihendusega vähendab faili suurust mitu korda. Teisendaja: Font Squirrel Webfont Generator.

Plugin või functions.php: kumb on usaldusväärsem?

functions.php on pikaajaliseks kasutuseks usaldusväärsem: puudub lisasõltuvus, kood on läbipaistev, plugina uuendused sind ei mõjuta. Pluginad võidavad mugavuse osas: 5 minutit versus pool tundi konksude õppimist. Töötava saidi puhul eelista wp_enqueue_style-i alamteemas. Kiire prototüübi või kliendisaidi jaoks, mis vajab lihtsat liidest, kasuta pluginat.

Miks näeb font mobiilis teistsugune välja kui lauaarvutis?

Mobiilibrauserid asendavad mõnikord süsteemseid fonte või kuvavad antialiasi erinevalt. Lisaks on ekraani suurused erinevad: 16px lauaarvutil loeb hästi, kuid telefonis võib see olla liiga suur. Lahendus: määra suhteline suurus clamp() abil (näiteks font-size: clamp(16px, 2.5vw, 20px)) ja testi päris seadmel, mitte emulaatoris.

Lõplik kokkuvõte: mida oma saidil 2026. aastal kasutada

Kui võtame kõik kokku viie lausega:

• Google Fonts on vaikimisi fondiallikas. Piisav 95% projektide jaoks: kiire, tasuta, kirillitsa tugi on kõikjal olemas.
• functions.php + wp_enqueue_style on parim käsitsi meetod. Puhas, elab üle teema uuendused, kood on läbipaistev.
• EasyFonts plugin töötab, kui soovid Google Fontsi kohalikku hostimist ilma koodipeavaluta. Kiirem kui tavaline CDN ja GDPR-iga kooskõlas.
• Kaks laadi fondi kohta, mitte rohkem: Regular ja Bold. Iga lisalaad varastab 30-50 KB laadimismahtu.
• WOFF2, mitte TTF: teisenda enne serverisse üleslaadimist. Säästab pool megabaiti lehe kohta.

Fontide vahetamine on üks neist ülesannetest, kus tund aega hoolikat seadistamist toob aastaid visuaalset kasu. Alusta kohe: mine Google Fontsi veebisaidile, leia oma projektile paar kirjastiili ja proovi ülaltoodud loetelust meetodit nr 4.