Opas 12 · Tekniikka
Muuttuva fontti eli variable font – hyödyt ja käyttöönotto
Muuttuva fontti voi sisältää jatkuvan paino-, leveys- tai muun vaihtelun yhdessä tiedostossa. Se antaa suunnittelulle joustavuutta, mutta ei automaattisesti tee sivusta nopeampaa.
Päivitetty 2.9.2026 · 8 min lukuaika
Lyhyt vastaus
Käytä muuttuvaa fonttia, kun tarvitset useita akselin arvoja ja yksi tiedosto on staattisia vaihtoehtoja tehokkaampi. Määritä tavalliset akselit ensisijaisesti font-weight-, font-stretch- ja font-style-ominaisuuksilla.
01
Akseli korvaa monta erillistä leikkausta
Painoakseli wght voi tarjota esimerkiksi arvot 100–900 ilman yhdeksää erillistä fonttitiedostoa. Muita rekisteröityjä akseleita ovat leveys wdth, optinen koko opsz, kursiivi ital ja kaltevuus slnt.
Fontti voi sisältää myös omia akseleita. Niiden nimi, vaihteluväli ja vaikutus tarkistetaan fontin dokumentaatiosta.
- Tarkista akselit ja niiden arvovälit.
- Käytä font-weight-arvoa painoakselille.
- Testaa selaimen automaattinen optinen koko.
- Määritä varafontti myös muuttuvan fontin rinnalle.
02
CSS-käyttöönotto
@font-face-säännössä muuttuvan painon voi ilmoittaa vaihteluvälinä, kuten font-weight: 100 900. Sivun elementeissä käytetään sen jälkeen tavallista font-weight-ominaisuutta.
font-variation-settings sopii omiin tai harvinaisempiin akseleihin. Tavallisille rekisteröidyille akseleille korkean tason CSS-ominaisuudet ovat yleensä selkeämpiä ja paremmin periytyviä.
03
Milloin staattinen tiedosto voittaa?
Jos sivu käyttää vain yhtä normaalia ja yhtä lihavoitua painoa, kaksi pientä staattista WOFF2-tiedostoa voi olla muuttuvaa fonttia pienempi. Mittaa käytetyt tiedostot äläkä tee päätöstä pelkän tiedostojen lukumäärän perusteella.
Myös vanha tuotantotyökalu, PowerPoint-versio tai 3D-kirjasto voi käsitellä muuttuvaa fonttia puutteellisesti. Testaa koko työnkulku lopulliseen vientiin asti.
Lähteet