Oletusfontti paljastaa WordPress-sivuston ensi silmäyksellä. Järjestelmäkirjasin huutaa "en määrittänyt mitään" kovemmin kuin yksikään ilmainen mallipohja.

Fontin vaihtaminen vie kymmenen minuuttia. Sinun ei tarvitse olla front-end-kehittäjä, eikä sinun tarvitse maksaa. Alla olevat viisi tapaa kattavat kaiken: aloittelijoista, jotka pelkäävät koskea koodiin, sivuston omistajiin, jotka tarvitsevat täyden hallinnan.

Olemme koonneet toimivat menetelmät vuodelle 2026. Huonoimmasta lähestymistavasta, jota vanhentuneissa oppaissa yhä suositellaan, aina kanoniseen "WordPressin tapaan".

💡 Pikakatsaus:

• Valitse fontti: Google Fonts (ilmainen, yli 1500 kirjasinta), Adobe Fonts (Creative Cloud -tilaus) tai lataa oma WOFF2-tiedostosi palvelimellesi.
• Päätä, tarvitsetko lisäosan (yksinkertaisempi, mukauttimen käyttöliittymä) vai manuaalisen liittämisen functions.php-tiedoston kautta (siistimpi, nopeampi, ei riippuvuutta kolmannen osapuolen koodiin).
• Manuaalisessa tavassa: lisää wp_enqueue_style functions.php-tiedostoon ja font-family CSS:ään.
• Lisäosatavassa: asenna EasyFonts tai Use Any Font, valitse kirjasin ja tallenna.
• Testaa lopputulos eri selaimilla ja mobiilissa: jokainen lisätty fontti tuo 50-200 kt lisää sivun lataukseen.

Miksi fontteja ylipäätään kannattaa vaihtaa sivustolla

Fontti muokkaa ensivaikutelmaa nopeammin kuin värit tai kuvat. Michiganin yliopiston tutkijat osoittivat jo vuonna 2008, että monimutkaisella fontilla ladottu teksti koetaan alitajuisesti "vaikeaksi". Lukijat noudattavat ohjeita epätodennäköisemmin ja yliarvioivat tehtävään tarvittavan ajan.

Myös serif- tai sans-serif-tyypillä on väliä. Serif-kirjasimet (Georgia, Merriweather) pidentävät lukuaikaa mutta lisäävät koettua auktoriteettia. Sans-serif-fontit (Roboto, Inter) nopeuttavat lukemista ja toimivat paremmin mobiilinäytöillä. Tämä ei ole arvailua: typografian psykologian tutkimuskatsaus vahvistaa vaikutuksen käytännössä.

WordPress-sivustolle oikea fontti ratkaisee kolme ongelmaa:

• Brändin tunnistettavuus. Yksilöllinen otsikkofontti estää sivustoasi näyttämästä "vain yhdeltä blogilta perusteemalla".
• Luettavuus. Oikea koko, riviväli ja kontrasti vähentävät välitöntä poistumisprosenttia.
• Visuaalinen hierarkia. Eri kirjasimet otsikoille ja leipätekstille ohjaavat kävijän katsetta.

Siirrytään nyt käytäntöön.

Mistä fontteja WordPressiin saa

Lähteitä on kolme: Google Fonts, Adobe Fonts ja itseisännöinti. Tarkastellaan kutakin.

Google Fonts: ilmainen eikä vaadi rekisteröitymistä

Ilmeisin lähde. Yli 1500 fonttia, avoin lisenssi, välimuistitus Googlen CDN:n kautta. Sopii 95 prosentille sivustoista.

Siirry osoitteeseen fonts.google.com. Käyttöliittymä tervehtii sinua ruudukolla, jossa on kortteja, joista jokainen näyttää fonttinäytteen.

Suodattimet ovat vasemmalla. Voit suodattaa kategorian (Serif, Sans Serif, Display, Handwriting, Monospace), kielen, tyylien määrän ja paksuuden mukaan. Suodattimet astuvat voimaan heti, ja tulokset päivittyvät ilman uudelleenlatausta.

Vie hiiri fontin päälle nähdäksesi valikon, jolla voit vaihtaa näytetekstiä. Kirjoita oma otsikkosi tai kappaleesi ja katso, miltä se näyttää.

Klikkaa "View specimen" avataksesi fonttisivun, jossa on kaikki tyylit, merkkitaulukko ja näytteitä eri koossa.

Jos pidät fontista, klikkaa kortin kulmassa olevaa punaista plussaa. Fontti siirtyy näytön alareunan kokoelmapaneeliin. Voit lisätä useita kirjasinperheitä: yhden otsikoille, toisen leipätekstille.

Laajenna kokoelmapaneeli nähdäksesi "Embed"- ja "Customize"-välilehdet.

Valitse "Customize"-välilehdellä tarvitsemasi tyylit. Tärkeää: älä valitse kaikkea. Jokainen tyyli on erillinen tiedosto, jonka selain lataa. Tyypilliselle sivustolle Regular (400) ja Bold (700) riittävät, joskus Italic. Oikeassa yläkulmassa oleva nopeusmittari näyttää, kuinka paljon fontti hidastaa latausta.

Jos sivustosi käyttää muuta kuin latinalaista kirjaimistoa, valitse oikea merkistö sivun alareunasta. Kyrilliselle se on Cyrillic.

Kaksi nuolipainiketta ylhäällä: vasen jakaa kokoelman, oikea lataa fonttitiedostot koneellesi. Hyödyllinen Photoshopia varten tai jos päätät hostata fontin itse.

Adobe Fonts (entinen Typekit)

Jos sinulla on Creative Cloud -tilaus, Adobe Fonts antaa käyttöön ammattimaisia kirjasintyyppejä, kuten Futura, Minion Pro ja Myriad. Fontit yhdistetään CSS:n kautta, samaan tapaan kuin Google Fontsissa. Ilmainen Creative Cloud -taso sisältää perusvalikoiman, joka riittää useimpiin projekteihin.

Mukautetut fontit WOFF2-muodossa

Ostitko lisensoidun fontin tai latasit ilmaisen Font Squirrelistä? Muunna WOFF2-muotoon (moderni webfonttiformaatti, Brotli-pakkaus, 97% selaimista tukee) ja lataa palvelimellesi. Etu: ei riippuvuutta kolmannen osapuolen CDN:ään ja GDPR-yhteensopiva. Haitta: fontti latautuu omalta palvelimeltasi, mikä on väistämättä hitaampaa kuin Googlen CDN.

5 Tapaa lisätä mukautettuja fontteja WordPressiin

Tapoja on tasan viisi. Käymme ne läpi "älä tee näin" -vaihtoehdosta ihanteelliseen WordPress-menetelmään.

Tapa 1: CSS @import (älä tee näin)

Google Fonts tarjoaa @import-välilehden, jossa on valmis CSS-merkkijono. Se näyttää kätevältä: kopioi, liitä, valmista.

Teknisesti koodi lisätään lapsiteeman style.css-tiedoston alkuun:

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

Miksi tämä on huonoin vaihtoehto? @import estää selainta lataamasta useita tyylitiedostoja rinnakkain. Selain lataa CSS-tiedoston, näkee sen sisällä olevan @import-määrityksen ja hakee fontin vasta sitten. Peräkkäinen lataaminen rinnakkaisen sijaan tarkoittaa 200-400 ms menetystä fonttia kohden. Mobiilissa tämä on kriittistä.

Älä käytä @import-määritystä fonteille. Koskaan.

Tapa 2: link-tagin lisääminen header.php-tiedostoon

Fonttikirjastot tarjoavat <link>-tagin lisättäväksi <head>-osioon. Voit sijoittaa sen suoraan header.php-tiedostoon, joka on jokaisessa WordPress-teemassa oleva mallitiedosto.

Sijoita <link> <head>- ja </head>-tagien väliin. Jos käytät lapsiteemaa, kopioi header.php yläteemasta lapsiteemaan ja muokkaa sitä siellä.

Tämä tapa toimii, mutta on hauras: teemapäivitykset korvaavat muutoksesi, jos et käytä lapsiteemaa. Lisäksi sisällön ja koodin sekoittaminen malleissa on huono käytäntö. Sopii kertaluontoiseen kokeiluun, ei pysyvään käyttöön.

Tapa 3: @font-face ja fonttien itseisännöinti

Jos fontti on omalla palvelimellasi, sinun on määriteltävä se @font-face-direktiivillä tyylitiedostossasi. Lataa ensin fonttitiedostot (WOFF2, WOFF) FTP:n kautta lapsiteemasi kansioon, esimerkiksi wp-content/themes/yourtheme-child/fonts/.

Lisää sitten style.css-tiedostoon:

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
}

font-display: swap -parametri on tärkeä: se käskee selainta näyttämään tekstin ensin järjestelmäfontilla ja vaihtamaan sen sitten mukautettuun fonttiin, kun se latautuu. Ilman tätä kävijät näkevät tyhjän ruudun fontin latautumisen ajan.

Muista korvata fontin nimi ja polku. Jos lähdetiedostosi on TTF tai OTF, muunna se WOFF2-muotoon Font Squirrelin online-muuntimella.

Tämä tapa antaa täyden hallinnan, mutta häviää nopeudessa Google Fontsille: palvelimesi on lähes varmasti hitaampi kuin Googlen CDN. Sivustoilla, joilla on alle 10 000 kävijää kuukaudessa, eroa ei huomaa. Paljon liikennettä saaville projekteille se on kriittistä.

Tapa 4: functions.php ja wp_enqueue_style (kanoninen WordPress-tapa)

WordPressin arkkitehtuurin näkökulmasta oikeaoppisin menetelmä. Sen sijaan, että lisäät koodia malliin, "enqueue-t" eli asetat jonoon fontin sisältävän tyylitiedoston wp_enqueue_scripts-koukun avulla.

Koodi lisätään aktiivisen teeman tai lapsiteeman functions.php-tiedostoon. Tässä toimiva esimerkki Google Fontsille:

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

wp_enqueue_style-funktio ottaa neljä parametria: yksilöllinen nimi (kahva), tyylitiedoston URL, taulukko riippuvuuksista (tässä tyhjä) ja versio (null, WordPress korvaa sen omallaan). wp_enqueue_scripts-koukku varmistaa, että koodi suoritetaan oikealla hetkellä sivun latauksen aikana.

Adobe-fonteille käytettiin aiemmin JavaScriptiä ja wp_enqueue_script-funktiota. Nyt Adobe Fonts on siirtynyt Google Fontsin kaltaiseen CSS-lähestymistapaan, joten wp_enqueue_style kattaa molemmat palvelut.

Miksi tämä on paras manuaalinen tapa:

• Fontit eivät korvaudu teemapäivitysten yhteydessä (jos olet lapsiteemassa).
• WordPress hallinnoi latausjärjestystä ja ratkaisee riippuvuudet.
• Koodi on eristetty functions.php-tiedostoon, mallit pysyvät siisteinä.
• Muut lisäosat voivat poistaa käytöstä tai muokata kutsuasi standardikoukkujen kautta.

Tapa 5: lisäosa (jos et halua koskea koodiin)

Etkö ole valmis sukeltamaan functions.php-tiedostoon? Lisäosa ratkaisee ongelman ilman yhtäkään koodiriviä.

Easy Google Fonts (visuaalinen esimerkki, mutta ei tuotantosivustoille)

Vanhin fonttilisäosa WordPress-hakemistossa. Tarjoaa mukauttimen käyttöliittymän: valitse fontti, näe muutokset reaaliajassa, tallenna.

Asennus on vakio: Lisäosat → Lisää uusi → hae "Easy Google Fonts" → Asenna → Ota käyttöön.

Käyttöönoton jälkeen Ulkoasu → Mukauta -valikkoon ilmestyy uusi "Typography"-kohta. Siirry sinne, valitse Typography Default, niin näet kappaleiden ja otsikoiden fonttisäätimet.

Klikkaa pudotusvalikkoa sen elementin vieressä, jota haluat muuttaa. Valikko laajenee:

Tärkein valinta on Font Family. Tässä kohdassa sinulla on käytössäsi koko Google Fonts -kirjasto (yli 600 kirjaintyyppiä). Fontit on ryhmitelty luokittain: serif, sans-serif, Display, Handwriting, Monospace. Voit hakea nimellä.

Klikkaa fonttia, ja muutokset näkyvät heti oikealla olevassa esikatselussa.

Seuraavaksi tulee hienosäätö. Font Weight/Style-välilehti ohjaa lihavuutta. Text Decoration lisää alleviivauksen, yliviivauksen tai yläviivan. Text Transform vaihtaa kirjainkokoa: suuraakkoset, pienaakkoset tai isot alkukirjaimet.

Appearance-välilehdellä: fontin väri, taustaväri, koko, rivikorkeus ja kirjainväli.

Positioning-välilehti: marginaalit, täytteet, reunukset, reunuksen pyöristys ja display-ominaisuus.

Kun olet valmis, klikkaa yläreunasta Save and Publish.

Rehellinen varoitus: Easy Google Fontsia ei ole päivitetty vuoden 2020 jälkeen. WordPress 6.4:ssä tai uudemmassa lisäosa ei välttämättä toimi. Jotkut käyttäjät valittavat, ettei "Typography"-vaihtoehto näy muokkausnäkymässä. Näytämme sen tässä havainnollistaaksemme toimintatapaa: useimmat fonttilisäosat toimivat saman muokkausnäkymämekanismin kautta.

Mitä tehdä, jos fontti ei vaihdu

Jotkin teemat käyttävät epästandardeja CSS-valitsimia. Otsikko ei välttämättä ole pelkkä <h1> vaan <h1 class="entry-title">, eikä lisäosa "näe" kyseistä elementtiä.

Ratkaisu: luo oma fonttisäätö kohdassa Settings → Google Fonts.

Sido tarvittava CSS-valitsin uuteen säätöön ja ota käyttöön pakotettu ohitus. Tallennuksen jälkeen säätö tulee näkyviin muokkausnäkymään vakiosäätöjen rinnalle.

Vaihtoehtoiset lisäosat (ajantasaiset vuonna 2026)

Easy Google Fonts ei ole ainoa vaihtoehto. Kolme toimivaa vaihtoehtoa:

• EasyFonts isännöi Google Fontsit paikallisesti palvelimellasi. Se tunnistaa automaattisesti käytössä olevat fontit, lataa ne ja tarjoilee ne omalta verkkotunnukseltasi. Nopeampi kuin tavalliset CDN-pyynnöt, ja lisäksi täysin GDPR-yhteensopiva. Kolmesta kevyin suorituskykyvaikutukseltaan.
• Use Any Font antaa sinun ladata omia fonttejasi ilman CSS:ää. Lisäosa muuntaa TTF/OTF/WOFF-tiedostot web-muotoon ja isännöi ne palvelimellasi. Sopii lisenssillä ostetuille kaupallisille fonteille.
• Fonts Plugin on vaihtoehtoinen Google Fonts -hallinta, jossa on muokkausnäkymän esikatselu. Toisin kuin vanhentunut Easy Google Fonts, tätä päivitetään säännöllisesti ja se on testattu nykyisillä WordPress-versioilla.

Fontin kohdistaminen sivuston elementteihin

Fontti on nyt yhdistetty, mutta se on vielä "ilmassa". Sinun täytyy kertoa selaimelle, mihin elementteihin sitä sovelletaan.

Tässä on perus-CSS otsikkofontin vaihtamiseksi. Lisää se kohdassa Appearance → Customize → Additional CSS:

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

Leipätekstille:

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

Tärkeä vivahde: font-family-määrityksessä fontin nimen on vastattava täsmälleen sitä, miten kirjasto sen ilmoittaa. Google Fonts käyttää muotoa 'Roboto', kun taas Adobe Fonts saattaa palauttaa 'open-sans' (ilman välilyöntiä ja ilman lainausmerkkejä). Katso tarkkaan palvelun antamaa koodia, älä fontin nimeä verkkosivustolla.

Voit lisätä tämän CSS:n kolmella tavalla: mukauttimen kautta (helpoin, säilyy teemapäivityksissä), lapsiteeman style.css-tiedoston kautta tai wp_head-koukun kautta. Suosittelemme ensimmäistä.

⁉️🤔 Usein kysytyt kysymykset

Kuinka monta fonttia sivustolle voi lisätä menettämättä nopeutta?

Optimaalisesti kaksi leikkausta: yksi otsikoille, yksi leipätekstille. Jokainen ylimääräinen fontti tuo yhden HTTP-pyynnön ja 50-200 kt sivupainoa. Kolme fonttia on jo katto. Ja ota käyttöön vain tarvitsemasi leikkaukset: Regular (400) ja Bold (700) painavat puolet siitä, mitä 5-6 leikkauksen paketti.

Google Fonts vai Adobe Fonts: kumpi kannattaa valita?

Yhdeksälle sivustolle kymmenestä Google Fonts. Ilmainen, nopea (Googlen CDN), yli 1500 fonttia, kyrilliset merkit löytyvät lähes kaikista suosituista kirjasintyypeistä. Adobe Fonts on järkevä, jos sinulla on jo Creative Cloud -tilaus ja tarvitset tietyn kaupallisen fontin, kuten Futuran tai Minion Pron.

Voiko tietokoneelta ladattua TTF-tiedostoa käyttää?

Voi, mutta muunna se ensin WOFF2-muotoon (moderni pakattu verkkomuoto). TTF-tiedostot ovat pakkaamattomia ja vievät huomattavasti enemmän tilaa. WOFF2 Brotli-pakkauksella pienentää tiedostokoon murto-osaan. Muunnin: Font Squirrel Webfont Generator.

Lisäosa vai functions.php: kumpi on luotettavampi?

functions.php on luotettavampi pitkäaikaisessa käytössä: ei ylimääräistä riippuvuutta, koodi on läpinäkyvää, lisäosien päivitykset eivät vaikuta sinuun. Lisäosat voittavat helppoudessa: 5 minuuttia vastaan puoli tuntia koukkujen opettelua. Tuotantosivustolle valitse wp_enqueue_style child-teemassa. Nopeaan prototyyppiin tai asiakassivustolle, joka tarvitsee yksinkertaisen käyttöliittymän, käytä lisäosaa.

Miksi fontti näyttää erilaiselta mobiilissa kuin työpöydällä?

Mobiiliselaimet saattavat toisinaan korvata järjestelmäfontteja tai renderöidä reunapehmennyksen eri tavalla. Lisäksi näyttökoot ovat erilaiset: 16px työpöydällä toimii hyvin, mutta puhelimessa se voi olla liian suuri. Ratkaisu: aseta suhteellinen koko clamp()-funktiolla (esimerkiksi font-size: clamp(16px, 2.5vw, 20px)) ja testaa oikealla laitteella, ei emulaattorilla.

Loppuyhteenveto: mitä käyttää sivustollasi vuonna 2026

Jos kaikki tiivistetään viiteen lauseeseen:

• Google Fonts on oletusarvoinen fonttilähde. Riittää 95 prosenttiin projekteista: nopea, ilmainen, kyrilliset merkit löytyvät kaikkialta.
• functions.php + wp_enqueue_style on paras manuaalinen tapa. Siisti, kestää teemapäivitykset, koodi on läpinäkyvää.
• EasyFonts-lisäosa toimii, jos haluat Google Fontsien paikallisen hostauksen ilman koodisäätöä. Nopeampi kuin tavallinen CDN ja GDPR-yhteensopiva.
• Kaksi leikkausta per fontti, ei enempää: Regular ja Bold. Jokainen ylimääräinen leikkaus vie 30-50 kt latauskapasiteettia.
• WOFF2, ei TTF: muunna ennen palvelimelle lataamista. Säästää puoli megatavua sivua kohden.

Fonttien vaihtaminen on yksi niistä tehtävistä, joissa tunnin huolellinen asennus tuottaa vuosien visuaalisen hyödyn. Aloita heti: mene Google Fonts -sivustolle, etsi pari kirjasintyyppiä projektiisi ja kokeile menetelmää 4 yllä olevasta listasta.