⚡ Kuinka ladata verkkofontit menettämättä nopeutta ja nopeuttaa tekstin renderöintiä
Kun sivusto latautuu kolme sekuntia ja käyttää sitten vielä toisen sekunnin kaiken tekstin uudelleenpiirtämiseen, kävijät lähtevät. Eivät kilpailijoille, vaan sulkevat vain välilehden. Ongelma on lähes aina sama: verkkofontit on ladattu huomioimatta suorituskykyä.
HTTP Archiven vuoden 2025 tietojen mukaan noin 84% sivustoista käyttää mukautettuja verkkofontteja, ja mediaanisivusto tekee 5 pyyntöä fonttitiedostoihin, joiden yhteiskoko on noin 400 kt. Huonolla yhteydellä tämä tarkoittaa 2-3 sekunnin renderöinnin estoa, jonka aikana käyttäjät näkevät tyhjän ruudun. Google huomioi fontin vaihtumisesta johtuvan sommittelun siirtymän (Cumulative Layout Shift) myös Core Web Vitals -mittaristossa.
Alla olevat neljä vaihetta eivät ole teoriaa. Tämä on käytännön minimi, joka ratkaisee valtaosan verkkofonttien suorituskykyongelmista. Jokainen vaihe vie 5-15 minuuttia.
💡 Pikayhteenveto:
- Päätä formaatit: woff2 ensisijaiseksi ja woff varavaihtoehdoksi riittää kaikille nykyaikaisille selaimille.
- Lisää kriittisten fonttien esilataus, jotta selain aloittaa lataamisen heti eikä odota CSS-tiedostoa.
- Tarkista font-face: local(), oikea src-järjestys, unicode-range latinalaisille merkeille.
- Aseta font-display: swap, jolloin kävijät näkevät tekstin välittömästi, vaikka fontti olisi vielä latautumassa.
Vaihe 1: Käytä woff2- ja woff-formaatteja, muuta ei tarvita
Verkkofonttiformaatteja on monia: EOT, TTF, OTF, SVG. Mutta vuonna 2026 tarvitset oikeasti vain kaksi.
woff2 on moderni standardi. Tiedostot ovat 30% pienempiä kuin woff samalla laadulla, koska ne käyttävät brotli-pakkausta gzipin sijaan. Selaintuki kattaa kaikki aina ajan tasalla pysyvät selaimet, mukaan lukien mobiili-Safarin ja Samsung Internetin. Maailmanlaajuisesti yli 98% käyttäjistä.
woff on varavaihtoehto pienelle osalle vanhempia selaimia (Safari iOS 11:ssä ja sitä aiemmissa, harvinaiset yritysympäristöt). Se on myös pakattu ja toimii kaikkialla IE9:stä lähtien. Pidä se viimeisenä src-määrittelyssä, jolloin selain ottaa woff2:n, jos pystyy, muuten turvautuu woffiin.
Älä käytä EOT:tä (Internet Explorer 8 ja sitä aiemmat) tai TTF:ää (raaka formaatti, ei pakkausta) vuonna 2026. Tällaisten selainten osuus on tilastollista kohinaa, ja jokainen ylimääräinen formaatti src-määrittelyssä kasvattaa CSS:n kokoa ja hämmentää selainta.
Jos sinulla on tiedostoja TTF- tai OTF-muodossa, muunna ne verkkogeneraattorilla. Transfonter tuottaa woff2:n ja woffin yhdellä kertaa, näyttäen glyyfien esikatselun ja lopullisen tiedostokoon. Vaihtoehto on Font Squirrel Webfont Generator.
Vaihe 2: Esilataa kriittiset fontit
Selain saa tiedon fonteista CSS:stä, ja se lukee CSS:n HTML:n jälkeen. Kun selain pääsee sinne asti, on keskimääräisellä yhteydellä kulunut jo 500-800 ms. Esilataus poistaa tämän viiveen: selain aloittaa fontin lataamisen heti kohdatessaan tagin <head>-osiossa, odottamatta CSS:ää.
Minimaalinen toimiva tagi:
1 <link rel="preload" as="font" 2 href="/fonts/open-sans.woff2" 3 type="font/woff2" 4 crossorigin="anonymous">
Avain on crossorigin="anonymous". Ilman sitä selain ohittaa esiladatun fontin ja lataa sen uudelleen. Syynä on se, että fontit noudetaan anonyymisti (CORS), mutta esilataus ilman crossorigin-määritettä tekee tavallisen pyynnön. Selain pitää näitä eri resursseina eikä yhdistä niitä.
Mitä esiladata. Ei jokaista fonttia sivustolla. Vain se, jota käytetään päätekstissä sivun yläosassa (above the fold): otsikko, leipäteksti, navigaatio. Loput voivat odottaa. Neljän tai viiden tiedoston esilataus tuottaa vähenevää hyötyä ja vie kaistaa kriittiseltä sisällöltä.
Tärkeä huomio Google Fonteista ja CDN-palveluista. Jos käytät Google Fonts -fontteja, tiedostot päivittyvät ajoittain, ja esilatauslinkki vanhaan versioon aiheuttaa kaksinkertaisen latauksen (vanha + uusi). CDN-fonttien esilatauksen sijaan käytä <link rel="preconnect"> fonttiverkkotunnukseen. Tämä nopeuttaa kättelyä ilman versioristiriidan riskiä:
1 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Esihaku toissijaisille fonteille. rel="prefetch" kertoo selaimelle: "tätä resurssia tarvitaan myöhemmin, lataa se, kun pääsisältö on valmis." Sopii fonteille sisäisillä sivuilla tai ikonifonteille alatunnisteessa. Prioriteetti on matala, ei vie kaistaa.
Moderni opas resurssien priorisointiin löytyy web.dev-dokumentaatiosta.
Vaihe 3: Kirjoita @font-face oikein
Ensi silmäyksellä @font-face on yksinkertainen. Käytännössä siinä on neljä hienovaraista kohtaa, joista jokainen vaikuttaa nopeuteen.
Esimerkki oikeasta määrittelystä:
1 @font-face { 2 font-family: 'Open Sans'; 3 font-weight: 400; 4 font-style: normal; 5 font-display: swap; 6 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 7 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 8 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 9 U+FEFF, U+FFFD; 10 src: local('Open Sans'), 11 url('/fonts/open-sans.woff2') format('woff2'), 12 url('/fonts/open-sans.woff') format('woff'); 13 }
Kohta kohdalta erittely:
local(): ensin src-määrittelyssä. Jos käyttäjällä on fontti jo asennettuna järjestelmässään (Roboto Androidissa, Segoe UI Windowsissa, San Francisco macOS:ssä), selain ottaa paikallisen kopion ja lataa nolla tavua. Laita local() aina src-määrittelyn ensimmäiselle riville. Ota nimi itse fonttitiedostosta: local('Open Sans') ja local('Roboto Regular').
Formaattien järjestys. Selain käy src-määrittelyn läpi vasemmalta oikealle ja ottaa ensimmäisen ymmärtämänsä formaatin. Siksi: local() → woff2 → woff. Ei EOT/TTF/SVG:tä loppuun, ellei sinulla ole erityistä yleisöä vanhoilla selaimilla, ja silloinkin ne tulevat woffin JÄLKEEN (ei ennen).
unicode-range: lataa vain tarvitsemasi glyyfit. Latinalaisille merkeille alue U+0000-00FF (Basic Latin + Latin-1 Supplement) riittää. Se on noin 250 glyyfiä verrattuna useisiin tuhansiin täydessä sarjassa. Todellinen tiedostokoko putoaa 3-5-kertaisesti. Älä ylikuormita aluetta: jokainen ylimääräinen unicode-lohko lisää glyyfejä, joita kukaan ei näe. Kyrillisille sivustoille lisää U+0400-04FF.
@font-face-lohkojen järjestys. Jos sinulla on useita leikkauksia (regular, bold, italic), laita normaali leikkaus (font-weight: 400) ensin. Selain aloittaa sen lataamisen.
Vaihe 4: Ota käyttöön font-display: swap ja hyvästi FOIT
Flash of Invisible Text (FOIT) tarkoittaa, että selain piilottaa tekstin 3 sekunniksi odottaessaan fonttia. Käyttäjät näkevät tyhjän sivun. Flash of Unstyled Text (FOUT) tarkoittaa, että teksti näkyy välittömästi järjestelmäfontilla ja korvautuu sitten mukautetulla. Jälkimmäinen on aina parempi kuin ensimmäinen.
font-display: swap @font-face-määrittelyssä tekee juuri tämän: teksti renderöityy heti järjestelmäfontilla, ja kun mukautettu fontti latautuu, se vaihdetaan tilalle. Ihanteellinen leipätekstille.
Muut arvot ja milloin niitä käytetään:
swap: leipätekstille. Teksti näkyy välittömästi, vaihto on sulava.optional: koristefonteille ja ikoneille. Selain päättää, lataako fonttia lainkaan. Huonolla yhteydellä se kieltäytyy ja pitää järjestelmäfontin. Odotusaika on 100 ms.block: lyhyt esto (yleensä 3 sekuntia), sitten teksti näkyy, fontti vaihdetaan, kun se latautuu. Harvoin käytetty.fallback: kompromissi. Lyhyt esto, sitten teksti näkyy, fontti vaihdetaan, jos se latautuu nopeasti.
Käytännössä käytä swap-arvoa leipätekstille ja optional-arvoa ikonifonteille ja koristeille. Se riittää.
Selaimen toiminta ilman font-display-määrittelyä. Jos et määritä mitään, Chrome piilottaa tekstin enintään 3 sekunniksi, Firefox enintään 3 sekunniksi, Safari toistaiseksi ja Edge näyttää järjestelmäfontin välittömästi. font-display: swap-määrityksellä tämä toiminta yhdenmukaistuu ja lopputulos on ennustettava.
Miten tarkistaa lopputulos
Testaa sivustosi ennen ja jälkeen osoitteessa web.dev/measure. Lighthouse näyttää "Varmista, että teksti pysyy näkyvissä verkkofontin latauksen aikana" omana rivinään. Jos tarkastus on punainen, font-display-määrityksesi ei toimi tai puuttuu.
Manuaaliseen tarkistukseen: avaa DevTools → Network, aseta kaistanrajoitukseksi "Slow 3G" ja päivitä sivu. Tekstin pitäisi ilmestyä järjestelmäfontilla välittömästi, ei 3 sekunnin tyhjän ruudun jälkeen.
Alla olevat kuvakaappaukset näyttävät eron vakiolähestymistavan ja optimoidun välillä (testi Slow 3G -tilassa):
Oletus: teksti on piilossa, kunnes fontti latautuu
Optimoitu toiminta: teksti näkyy välittömästi järjestelmäfontilla
Ero näkyy paljaalla silmällä: ensimmäinen kuvakaappaus näyttää valkoisen ruudun, toinen sisällön, joka on saatavilla heti.
Performance.now() 2024 -konferenssissa Mandy Michael käsittelee edistyneitä strategioita: inkrementaalista unicode-range-määritystä, fonttien paloittelua ja variable font -fonttien käyttöä. Niille, jotka haluavat mennä neljää perusvaihetta pidemmälle.
⁉️🤔 Usein kysytyt kysymykset
Miksi tarvitsen woffia, jos woff2 on tuettu kaikkialla?
Jäljellä olevat vanhan iOS Safarin käyttäjät (iOS 11 ja sitä aiemmat) ja harvinaiset yritysympäristöt lukituilla selaimilla eivät tue woff2:ta. Ilman woff-varavaihtoehtoa nämä käyttäjät näkevät järjestelmäfontin sinun fonttisi sijaan. Woff lisää 15-20 kt pakettiin: mitätön hinta jäljellä olevan osuuden kattamisesta.
Voinko vain käyttää Google Fontsia ja olla huolehtimatta?
Kyllä, ja useimmille sivustoille tämä on optimaalinen polku. Google Fonts tarjoaa automaattisesti woff2:n nykyaikaisille selaimille, käyttää maantieteellisesti hajautettua CDN:ää ja tukee
display=swap-parametria URL-parametrina. Haitat: riippuvuus ulkoisesta CDN:stä (yksityisyydensuojaan liittyvät näkökohdat, GDPR), kyvyttömyys hallitaunicode-range-määritystä ja paikallista fonttiasennusta. Jos yksityisyydensuoja ja hallinta ovat tärkeitä, isännöi fontit itse.
Mistä tiedän, hidastavatko fontit todella sivustoani?
Lighthouse (Audits-välilehti Chrome DevToolsissa) näyttää tarkastuksen "Varmista, että teksti pysyy näkyvissä verkkofontin latauksen aikana." WebPageTest tarjoaa vesiputouskaavion, jossa on ajoitus jokaiselle fonttipyynnölle. Jos fontit alkavat myöhemmin kuin ensimmäinen CSS, esilatausta ei ole määritetty. Jos sommittelun siirtymä on suurempi kuin 0,1, fontti aiheuttaa Cumulative Layout Shift -ongelman, ja Google huomioi tämän Core Web Vitals -mittaristossa.
font-display: swap pilaa ulkoasun, teksti "hyppää" vaihdon yhteydessä?
Kyllä, tämä on swap-arvon tunnettu haittapuoli. Torju se kahdella tekniikalla. Ensimmäinen: aseta tekstin
font-sizejaline-heightvastaamaan järjestelmän varafonttia. Mittojen ero on minimaalinen. Toinen: käytä Font Style Matcheria taisize-adjust-ominaisuutta@font-face-määrittelyssä (saatavilla nykyaikaisissa selaimissa) sovittaaksesi mukautetun fontin mitat järjestelmäfonttiin. Säädön jälkeen CLS on nolla.
Pitäisikö minun esiladata kaikki fontit sivustolla?
Ei. Esilataa vain kriittiset fontit: ne, jotka muodostavat tekstin sivun yläosassa (ensimmäiset 1-2 ruutua). Lataa loput normaalisti CSS:n kautta. Yli viiden fontin esilataus tukkii kaistan ja viivästyttää tärkeämpiä resursseja jonossa. Käytännössä 1-2 esilatauslinkkiä kattaa valtaosan skenaarioista.
Onko vaivan arvoista: neljä vaihetta, neljä minuuttia
Verkkofonttien määrittäminen ei ole viikon mittainen projekti. Muuntaminen woff2:een, @font-face-määrityksen korjaaminen, esilataus ja font-display: swap vievät 20-30 minuuttia työtä, vaikka et olisi koskaan aiemmin tehnyt sitä.
Hyöty on mitattavissa: teksti tulee näkyviin 1,5-2,5 sekuntia aiemmin Slow 3G -yhteydellä. Core Web Vitals ei rankaise sommittelun siirtymästä. Ja käyttäjät eivät lähde tuijottaessaan valkoista ruutua.
Aloita yhdestä fontista: pääleipätekstin fontista. Tee neljä vaihetta. Tarkista Lighthouse ennen ja jälkeen. Ero numeroissa on vakuuttavampi kuin mikään perustelu.
Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.