Verkkofontit hidastavat sivua: näin ne ladataan oikein

Fonttitiedosto on pienempi kuin kuva, mutta toisin kuin kuva, se voi estää tekstin näkymisen. Tämä sivusto lataa jokaiselle kävijälle yhden kolmesta ulkoasusta, ja jokaisella on omat fonttinsa. Mittasimme ne. Lyhyt vastaus: isännöi fontit itse WOFF2-muodossa, lataa vain tarvittavat merkit ja kirjoita @font-face-määrittelyt suoraan sivun headiin. Alla luvut, web.devin neuvot ja se, mitä tämä sivusto tekee tällä hetkellä väärin.

Fontti viivästää tekstiä ja voi siirtää asettelua

Web.devin fonttiohjeen mukaan viivästynyt tekstin renderöinti viivästää First Contentful Paintia ja joissain tilanteissa myös Largest Contentful Paintia, joka on yksi Core Web Vitals -mittareista (web.dev). Jos sivun suurin elementti on tekstiä, esimerkiksi iso otsikko, fontti on suoraan LCP:n tiellä.

Toinen haitta on asettelun siirtymä. Kun selain näyttää ensin varafontin ja vaihtaa sen verkkofonttiin, web.devin mukaan vaihto voi aiheuttaa asettelun siirtymiä ja vaikuttaa Cumulative Layout Shift -mittariin (web.dev). Leveä otsikkofontti, joka korvaa kapean järjestelmäfontin, siirtää kaiken sen alapuolella olevan.

Ongelma on yleinen. HTTP Archiven Web Almanacin mukaan vuonna 2025 verkkofontteja oli noin 88 prosentilla sivustoista, ja Google Fonts löytyi noin 54 prosentilta pöytäkonesivustoista ja 47 prosentilta mobiilisivustoista (Web Almanac 2025).

Tämän sivuston fontit painavat 51,3–198,5 kilotavua ulkoasusta riippuen

Mittasimme kunkin ulkoasun fonttitiedostot Fontsource-paketeista, joilla samat Google Fonts -fontit voi isännöidä itse. Mukana on vain latin-osajoukko, joka sisältää suomen ä- ja ö-kirjaimet.

Ulkoasu A (Sana kerrallaan) käyttää Archivoa muuttuvana fonttina, jonka leveysakseli on 62–125 ja painoakseli koko alueella. Pelkkä Archivo on 88 kilotavua, ja Instrument Sansin ja IBM Plex Monon kanssa ulkoasun fontit ovat yhteensä 150,2 kilotavua.

Ulkoasu B (Toimisto ei nuku) on raskain. Bricolage Grotesque ladataan kolmella akselilla (optinen koko, leveys ja paino), ja se on yksinään 128,5 kilotavua. Instrument Serifin ja Schibsted Groteskin kanssa yhteensä 198,5 kilotavua.

Ulkoasu C (Lähtevät artikkelit) on kevein: Geist ja Geist Mono muuttuvina fontteina ovat yhteensä 51,3 kilotavua. Samat kuusi painoa staattisina tiedostoina olisivat 130,6 kilotavua. Web.dev toteaa, että yksi muuttuva fontti voi korvata useita fonttitiedostoja (web.dev), ja tässä tapauksessa se myös säästää yli puolet.

Vertailun vuoksi: Web Almanacin mukaan yksittäisen fonttitiedoston mediaanikoko oli vuonna 2024 noin 36–39 kilotavua pakattuna, ja vuonna 2025 samaa luokkaa (Web Almanac 2025). Ulkoasu B lataa siis useamman keskikokoisen fontin verran pelkkää typografiaa. Se on tietoinen valinta, koska B:n jättiotsikko on koko ulkoasun idea, mutta hinta on tiedettävä.

Tämä sivusto lataa fontit liian myöhään

Fontit ladataan tällä hetkellä Google Fontsista. Sivun head-osassa on preconnect-vihjeet molempiin Googlen fonttiosoitteisiin, ja Google Fonts -osoitteessa on display=swap. Nämä ovat oikein: web.dev suosittelee preconnectia, kun fontit tulevat kolmannen osapuolen palvelimelta (web.dev).

Väärin on se, miten fonttien tyylitiedosto löydetään. Koska ulkoasu arvotaan selaimessa, pieni skripti päättää ensin ulkoasun ja lisää vasta sitten Google Fontsin tyylitiedoston sivulle. Selain ei siis näe fonttiosoitetta HTML:stä vaan vasta skriptin ajon jälkeen, ja sen jälkeen se hakee ensin CSS-tiedoston ja vasta siitä varsinaisen fonttitiedoston. Jokainen vaihe on oma pyyntönsä.

Hyvä puoli ratkaisussa on, että kävijä lataa vain oman ulkoasunsa fontit, ei kaikkien kolmen. Huono puoli on ketju: skripti, sitten tyylitiedosto toiselta palvelimelta, sitten fontti kolmannelta.

Korjaus on työjonossa: fontit siirretään sivuston omalle palvelimelle WOFF2-muodossa ja vain latin-osajoukkona.

Oikea tapa on itse isännöity WOFF2 ja määrittelyt headissa

Seuraavat neuvot ovat web.devin fonttiohjeesta. Ne pätevät WordPressiin yhtä lailla kuin tähän Astro-sivustoon.

Isännöi fontit itse. Web.devin mukaan itse isännöity fontti tuottaa periaatteessa paremman suorituskyvyn, koska kolmannen osapuolen yhteyttä ei tarvitse avata (web.dev). Vanha perustelu Google Fontsille oli, että fontti on jo kävijän välimuistissa toiselta sivustolta. Se ei enää päde: Chrome osioi välimuistin sivustokohtaisesti versiosta 86 alkaen, ja Chromen oman blogin mukaan fontteja monille sivustoille jakavat palvelut voivat nähdä tämän takia lisää liikennettä (Chrome for Developers). Itse isännöinti on jo yleistä: Web Almanacin mukaan 31,5 % pöytäkonesivustoista ja 36,4 % mobiilisivustoista käyttää pelkästään itse isännöityjä fontteja (Web Almanac 2025).

Käytä WOFF2:ta ja karsi merkit. Web.devin mukaan WOFF2 on tuettu kaikkialla, ja käyttämättömien merkkien poistaminen voi pienentää fonttitiedostoa merkittävästi (web.dev). Suomenkieliselle sivulle latin-osajoukko riittää lähes aina.

Kirjoita @font-face-määrittelyt headiin. Web.devin mukaan useimmat sivustot hyötyisivät vahvasti siitä, että fonttimäärittelyt ja muu kriittinen tyyli kirjoitetaan suoraan pääsivun headiin (web.dev). Silloin selain ei odota erillistä CSS-tiedostoa.

Esilataa vain yksi fontti. Preload saa selaimen löytämään fontin aikaisin, mutta web.devin mukaan se vie selaimen resursseja muulta (web.dev). Esilataa vain se fontti, jolla sivun suurin otsikko on kirjoitettu.

Valitse font-display tietoisesti. swap on yleisin valinta: Web Almanacin mukaan se on noin 49,6 prosentilla pöytäkonesivuista (Web Almanac 2025). Se näyttää tekstin heti, mutta voi siirtää asettelua. Jos asettelun siirtymä on ongelma, varafontin mittoja voi säätää lähemmäs verkkofonttia CSS:n size-adjust-ominaisuudella.

Moni sivusto jättää helpot hyödyt käyttämättä. Web Almanacin mukaan preconnect-vihje on noin 18,3 prosentilla pöytäkonesivuista ja fontin preload noin 12,0 prosentilla (Web Almanac 2025).

Itse isännöinti poistaa myös tietosuojakysymyksen

Münchenin alioikeus katsoi tammikuussa 2022, että Google Fontsin upottaminen sivustolle paljasti kävijän IP-osoitteen Googlelle luvatta, ja määräsi sivuston ylläpitäjän maksamaan 100 euron vahingonkorvauksen (The Hacker News). Kyse on yksittäisestä saksalaisesta tuomiosta, ei EU:n yleisestä linjauksesta, eikä tämä ole oikeudellinen neuvo. Itse isännöity fontti ei lähetä mitään kolmannelle osapuolelle, joten kysymystä ei synny.

Fonttien osuus Core Web Vitals -kokonaisuudessa on käyty läpi artikkelissa Core Web Vitals 2026, ja koko tekninen perusta pilarissa Tekninen SEO tekoälyaikana.

Kysymyksiä, joita tästä haetaan

Onko Google Fonts nopeampi, koska fontti on jo kävijän välimuistissa?

Ei enää. Chrome osioi välimuistin sivustokohtaisesti versiosta 86 alkaen, joten toisella sivustolla ladattu fontti ladataan sinun sivullesi uudelleen. Chromen oma blogi toteaa, että fontteja jakavat palvelut voivat nähdä tämän takia lisää liikennettä.

Kumpi on parempi, font-display: swap vai optional?

swap näyttää tekstin heti varafontilla ja vaihtaa sen, mikä voi siirtää asettelua. optional käyttää verkkofonttia vain, jos se on ladattu hyvin nopeasti, eikä siirrä asettelua. Otsikkofontille, jolla on iso visuaalinen merkitys, swap; leipätekstille optional on usein turvallisempi.

Onko Google Fontsin käyttö EU:ssa laitonta?

Münchenin alioikeus katsoi tammikuussa 2022, että Google Fontsin upottaminen paljasti kävijän IP-osoitteen Googlelle luvatta, ja määräsi 100 euron korvauksen. Se on yksittäinen saksalainen tuomio, ei EU:n yleinen linjaus. Itse isännöinti poistaa kysymyksen kokonaan. Tämä ei ole oikeudellinen neuvo.

Lähteet

1. web.dev: Best practices for fontspreconnect, itse isännöinti, swap ja CLS, preload, osajoukot, WOFF2, muuttuvat fontit, inline-määrittelyt
2. HTTP Archive Web Almanac 2025: FontsVerkkofonttien, Google Fontsin, itse isännöinnin, swapin, preconnectin ja preloadin yleisyys
3. Chrome for Developers: Gaining security and privacy by partitioning the cacheVälimuistin osiointi Chrome 86:sta alkaen
4. The Hacker News: German Court Rules Websites Embedding Google Fonts Violates GDPR (2022)LG München 20.1.2022, 100 € vahingonkorvaus
5. Fontsource: @fontsource-variable/archivo (npm)Mittauksen lähdetiedostot; samoin Bricolage Grotesque, Geist ja muut
6. mainostoimisto.ai: src/lib/ulkoasut.tsSivuston nykyiset Google Fonts -osoitteet

Löysitkö virheen?

Tämän tekstin kirjoitti Claude ja toinen kone tarkisti faktat. Ihminen ei ole lukenut jokaista tekstiä, joten sinun huomiosi on tässä oikeasti tarpeen. Jos jokin on väärin, kerro: ilmoitus tulee Ilkalle, hän korjaa, ja korjaus merkitään tähän tekstiin näkyviin.

Mikä on väärinSähköposti, jos haluat kuulla korjauksesta

Lähetä ilmoitus