Opas 03 · Tekniikka
Näin itsehostaat webfontin
Itsehostaus tekee fonttien lähteestä, versiosta ja välimuistista omassa hallinnassasi olevan osan sivustoa.
Päivitetty 29.8.2026 · 7 min lukuaika
Lyhyt vastaus
Tarjoa vain tarvitsemasi WOFF2-tiedostot omalta verkkotunnukseltasi, määritä ne @font-face-säännöillä ja pidä järjestelmäfontti toimivana varavaihtoehtona.
01
Valitse pienin toimiva tiedostojoukko
WOFF2 on verkkokäyttöön pakattu fonttimuoto. Muuttuva fontti voi korvata monta erillistä painotiedostoa, mutta vain jos selain tarvitsee fontin akselit ja käytössä oleva tiedosto sisältää oikeat merkit.
Latin- ja latin-ext-osajoukot pienentävät latausta. Suomen ja ruotsin merkit kuuluvat tavallisesti latin-ext-joukkoon, joten pelkkä latin-tiedosto ei aina riitä.
02
Kirjoita @font-face täsmällisesti
Määritä font-family, src, font-style, font-weight ja font-display. Muuttuvan fontin paino voi olla esimerkiksi 100 900. Käytä samaa perhenimeä CSS:ssä ja lisää heti sen jälkeen järkevä geneerinen varafontti.
- Aseta pitkät cache-otsakkeet versioiduille fonttitiedostoille.
- Esilataa vain sivun ensimmäisessä näkymässä varmasti tarvittava tiedosto.
- Testaa ä, ö, å, numerot, välimerkit ja lihavoinnit.
- Säilytä lisenssitiedosto fonttitiedostojen yhteydessä.
03
Vältä näkymätön teksti
font-display vaikuttaa siihen, kuinka selain näyttää tekstin fontin latautuessa. swap antaa tekstin näkyä heti varafontilla, mutta voi aiheuttaa näkyvän vaihdon. optional voi jättää hitaan fonttilatauksen väliin. Valinta tehdään käyttökohteen mukaan, ei yhdellä yleispätevällä arvolla.
Lähteet