Ajoit sivustosi GTmetrixin läpi ja sait Google Fonts -virheitä? Et ole yksin. Ulkoiset pyynnöt osoitteeseen fonts.googleapis.com hidastavat latautumista, eivätkä välimuistilisäosat, kuten WP Rocket tai WP Fastest Cache, pysty pakkaamaan jonkun toisen palvelimella sijaitsevia resursseja.

Vuodesta 2022 lähtien on ollut toinenkin syy: saksalainen tuomioistuin päätti, että Google Fontsien dynaaminen lataaminen rikkoo GDPR:ää, koska kävijöiden IP-osoitteet välitetään Googlen palvelimille Yhdysvaltoihin ilman suostumusta. Fonttien omapalvelinhostaus ratkaisee kolme ongelmaa kerralla: GTmetrixin suorituskyvyn, GDPR-vaatimustenmukaisuuden ja täyden hallinnan välimuistitukseen.

Alla on vaiheittainen opas. Fontin valinnasta Google Fontsissa puhtaaseen GTmetrix-raporttiin, jossa ei ole yhtään ulkoisen resurssin virhettä.

💡 Nopea yleiskatsaus:

• Lataa tarvitsemasi fonttileikkaukset Google Fontsista
• Muunna.ttf WOFF2-muotoon Transfonterilla tai google-webfonts-helperillä
• Siirrä tiedostot kansioon /wp-content/uploads/fonts/ FTP:n kautta
• Lisää @font-face-säännöt teemasi CSS:ään ja varmista renderöinti
• Testaa sivustosi uudelleen GTmetrixissä; Google Fonts -virheiden pitäisi olla poissa

Miksi fontit kannattaa hostata paikallisesti

Kun selain lataa sivun, se menee osoitteeseen fonts.googleapis.com, hakee CSS:n ja noutaa sitten varsinaiset fonttitiedostot osoitteesta fonts.gstatic.com. Siinä on vähintään kaksi ulkoista DNS-hakua ja kaksi HTTP-istuntoa, joihin et voi vaikuttaa. Välimuistilisäosat ovat tässä voimattomia: et voi pakata etkä viivästyttää ulkoisen resurssin latausta.

Paikallinen hostaus muuttaa tilanteen. Fonttitiedostot sijaitsevat omalla palvelimellasi, samalla verkkotunnuksella, samassa CDN:ssä ja samoilla välimuistisäännöillä. Selain ei mene minnekään ulkoiseen osoitteeseen, ja GTmetrix ja PageSpeed Insights lakkaavat valittamasta kolmannen osapuolen resursseista.

Ja kyllä, GDPR. Tammikuussa 2022 Münchenin alioikeus päätti, että Google Fontsien dynaaminen lataaminen ilman käyttäjän suostumusta rikkoo GDPR:ää. Oikeusjuttujen aalto pyyhkäisi Euroopan yli, ja sivuston omistajat alkoivat joukoittain siirtyä paikalliseen hostaukseen. Fonttien hostaaminen itse on luotettavin ratkaisu.

Vaihe 1. Valitse fontti Google Fontsissa

Mene Google Fontsiin ja etsi tarvitsemasi fontti. Tässä oppaassa käytän Robotoa, yhtä suosituimmista webfonteista, jossa on kyrillinen tuki.

Kaksi sääntöä keveyteen:

• Minimoi leikkaukset. Jokainen leikkaus (regular, bold, italic) on erillinen tiedosto ja erillinen pyyntö. Jos suunnitelmasi käyttää vain regularia ja boldia, poista valinta muista.
• Minimoi fontit. Pidä yksi tai kaksi fonttia sivustoa kohden. Kolmas on jo ylilyönti suorituskyvyn kannalta, näytti se kuinka kauniilta tahansa.

Valitsin Roboto Regularin (400) ja Roboto Boldin (700). Siinä kaikki.

Vaihe 2. Lataa fontti

Klikkaa fonttisivulla "Download family" -painiketta. Google pakkaa kaikki leikkaukset ZIP-arkistoon. Leikkausvalinnalla ei ole tässä vaiheessa väliä; arkisto sisältää joka tapauksessa koko perheen. Karsimme myöhemmin.

Pura arkisto. Tarvitsemme tiedostot Roboto-Regular.ttf ja Roboto-Bold.ttf.

Vaihe 3. Muunna fontit web-muotoihin

Selaimet eivät käytä.ttf-tiedostoja suoraan. Tarvitset WOFF- ja WOFF2-muodot; ne ovat pakattuja ja latautuvat nopeammin. On kaksi työkalua, molemmat ilmaisia.

Transfonter on klassikko: mene osoitteeseen transfonter.org, klikkaa "Add fonts" ja lataa.ttf-tiedostosi.

Jätä asetukset oletusarvoihin; WOFF ja WOFF2 kattavat kaikki nykyaikaiset selaimet. EOT:tä (vanhalle Internet Explorerille) ei tarvita vuonna 2026. Klikkaa "Convert".

Google-webfonts-helper on modernimpi vaihtoehto nimenomaan Google Fonts -kirjasimille. Palvelu osoitteessa gwfh.mranftl.com tuottaa sekä WOFF2-tiedostot että käyttövalmiin CSS:n @font-face-määrityksineen. Fontteja ei tarvitse ladata kolmannen osapuolen palvelimelle; kaikki tapahtuu paikallisesti selaimessasi. Lisensoiduille fonteille ja brändätyille kirjasintyypeille tällä on merkitystä.

Kumpi työkalu kannattaa valita? Transfonter on yksinkertaisempi kertaluonteiseen tehtävään. Google-webfonts-helper on kätevämpi, jos vaihdat fontteja usein tai työskentelet kaupallisilla kirjasintyypeillä, joita et mieluiten lataisi ulkoisille palvelimille.

Vaihe 4. Lataa webfontit palvelimellesi

Muuntamisen jälkeen lataa ZIP-paketti. Sen sisältä löydät.woff- ja.woff2-tiedostot jokaiselle leikkaukselle. Roboto Regularille ja Boldille saat 4 tiedostoa:

Lataa ne FTP:n tai hosting-palvelusi tiedostonhallinnan kautta polkuun /wp-content/uploads/fonts/. Polku /wp-content/uploads/ on valittu tarkoituksella: ydin- ja teemapäivitykset eivät koske siihen, toisin kuin teemakansioon.

Lataamisen jälkeen varmista toimivuus avaamalla suora linkki tiedostoon selaimessasi:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Selaimen pitäisi alkaa ladata tiedostoa. Jos ei, tarkista kansion käyttöoikeudet (pitäisi olla 755) ja itse polku.

Vaihe 5. Lisää @font-face CSS:ään

Transfonterin ZIP-arkisto sisältää stylesheet.css-tiedoston, joka on valmis mallipohja fontin liittämiseen. Avaa se ja kopioi sen sisältö.

Liitä koodi aktiivisen teemasi style.css-tiedoston (tai custom.css-tiedoston, jos teemasi tukee sitä) aivan alkuun. Käytä polkuja palvelimellasi oleviin tiedostoihin, älä arkiston polkuja. Korvaa suhteelliset URL-osoitteet absoluuttisilla:

Alkuperäinen koodi stylesheet.css-tiedostosta:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Muuta muotoon:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Korvaa your-site.com omalla verkkotunnuksellasi. Toista jokaiselle leikkaukselle.

Jotta fonttia on helppo käyttää merkinnöissäsi, lisää alle wrapper-luokat:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Nyt mikä tahansa elementti, jolla on luokka roboto_font tai roboto_bold_font, näkyy Robotolla.

Vaihe 6. Varmista renderöinti

Luo testisivu (tai avaa mikä tahansa olemassa oleva sivu luonnostilassa) ja liitä tämä HTML-tekstimuokkaimessa:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Avaa esikatselu. Ensimmäinen otsikko käyttää teeman oletusfonttia; toinen ja kolmas käyttävät Robotoa.

Jos fontti ei lataudu, avaa selaimen konsoli (F12 → Network) ja tarkista, että WOFF2-tiedostot latautuvat omalta verkkotunnukseltasi, eivät osoitteesta fonts.gstatic.com. Vastauskoodin tulee olla 200 ja tyypin font/woff2.

Vaihe 7. Tee fontista oletus

Jos haluat ottaa Roboton käyttöön koko sivustolla lisäämättä luokkia jokaiseen otsikkoon, lisää tämä style.css-tiedostoon:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Huomio: jos teemasi käyttää jo mukautettua fonttia, etsi font-family-rivit style.css-tiedostosta ja korvaa ne. Pelkkä body-säännön lisääminen olemassa olevan päälle aiheuttaa ristiriidan. Varmista, että vanhat määritykset poistetaan tai kommentoidaan pois.

Vaihe 8. Määritä varafonttipino

Google Fontsit eivät ole järjestelmäfontteja. Jos selain ei pysty lataamaan niitä (kävijä on offline-tilassa, mainoksenesto päällä, tilapäinen häiriö), sivulla ei ole tekstiä. Ratkaisu on fonttipino.

Väärin:

1
font-family: 'Roboto';

Oikein, varafonteilla:

1
font-family: 'Roboto', Arial, sans-serif;

Selain kokeilee ensin Robotoa. Jos se epäonnistuu, se turvautuu Arialiin. Ei Arialia? Järjestelmän sans-serif. Sivu on aina luettavissa, vaikka mukautettu fontti ei latautuisikaan.

Vaihe 9. Testaa sivustosi uudelleen GTmetrixissä

Aja GTmetrix uudelleen. "Waterfall"-osiossa ei pitäisi enää näkyä pyyntöjä osoitteisiin fonts.googleapis.com tai fonts.gstatic.com. "Serve static assets with an efficient cache policy" -virhe fonteille katoaa myös, koska ne ovat nyt omalla palvelimellasi ja välimuistissa omien sääntöjesi mukaisesti.

Jos virheitä jää jäljelle, tarkista Waterfall-välilehti. Jokin teema tai lisäosa (esimerkiksi Elementor) saattaa yhä hakea fontteja Googlen CDN:stä. Seuraava osio auttaa tässä.

Vaihtoehto laiskoille: Local Google Fonts -lisäosa

Jos et halua käsitellä FTP:tä ja CSS:ää, on olemassa Local Google Fonts -lisäosa. Se etsii automaattisesti kaikki teemasi ja lisäosiesi käyttämät Google Fontsit, lataa ne ja tarjoilee ne omalta palvelimeltasi.

Hyvät puolet: asenna, aktivoi, unohda. Huonot puolet: se toimii vain Google Fontsien kanssa (ei muiden ulkoisten fonttien) eikä tarjoa tarkkaa hallintaa tiedostomuotojen suhteen. Useimmille WordPress-sivustoille tämä on enemmän kuin tarpeeksi.

Hyödyllinen video aiheesta

Englanniksi, visuaalisella esittelyllä jokaisesta vaiheesta fontin valinnasta lopulliseen CSS:ään:

⁉️🤔 Usein kysytyt kysymykset

Onko fonttien itseisännöinti pakollista vuonna 2026?

Juridisesti kyllä, jos sinulla on vierailijoita EU:sta. Münchenin tuomioistuin loi ennakkotapauksen vuonna 2022, ja sen jälkeen kymmenet saksalaiset tuomioistuimet ovat vahvistaneet: Google Fontsien dynaaminen lataaminen ilman suostumusta = GDPR-rikkomus. Suorituskyvyn kannalta myös kyllä: kaksi ylimääräistä DNS-hakua ja välimuistiin tallentumaton ulkoinen resurssi eivät nopeuta sivustoasi. Fonttien itseisännöinti ratkaisee molemmat ongelmat kerralla. Local Google Fonts -lisäosa vie 5 minuuttia; manuaalinen tapa Transfonterilla vie 15. Valitse sen mukaan, oletko valmis käyttämään FTP:tä.

Google-webfonts-helper vai Transfonter: kumpi on parempi?

Yhden fontin kertaluonteisessa liittämisessä eroa ei juuri ole. Transfonter on yksinkertaisempi: lataa.ttf, saat WOFF2:n ja CSS:n. Google-webfonts-helper on kätevämpi, kun fontteja vaihdetaan usein: se ei lataa tiedostoja kolmannen osapuolen palvelimelle ja tuottaa heti valmiin, oikeat polut sisältävän @font-face -määrityksen. Kaupallisesti lisensoiduille fonteille vain google-webfonts-helper.

Entä jos fontit eivät näy paikallisen latauksen jälkeen?

Kolme tyypillistä syytä. Ensinnäkin väärä polku url()-kohdassa: tarkista, että linkki aukeaa selaimessa ja palauttaa tiedoston, ei 404:ää. Toiseksi CORS: jos fontit latautuvat CDN:stä tai alidomainista, palvelimen on palautettava Access-Control-Allow-Origin-otsake. Kolmanneksi teeman ristiriita: avaa DevTools (F12 → Computed), etsi elementti, jossa fonttisi on, ja katso, mikä font-family todellisuudessa on käytössä. Usein teema ohittaa sen alempana kaskadissa.

Voinko isännöidä fontteja CDN:llä oman palvelimeni sijaan?

Kyllä, mutta CDN:n on oltava omasi. Keskeinen periaate on, että fontit tarjoillaan samasta domainista (tai alidomainista) kuin sivustosi, ilman cross-domain-pyyntöjä kolmannen osapuolen palvelimille. Silloin välimuistitus toimii, eikä GDPR:ää rikota.

Miten varmistan, että fontit todella latautuvat paikallisesti?

Avaa DevTools → Network → Font-välilehti. Päivitä sivu. Kaikkien fonttipyyntöjen tulee kohdistua omaan domainiisi. Jos näet fonts.googleapis.com tai fonts.gstatic.com, ulkoinen lataus on yhä jossain käytössä. Todennäköisimmin jokin teema tai lisäosa käyttää sitä edelleen. Tarkista asetukset tai asenna Local Google Fonts.

Kumpi valita: manuaalinen lataus vai lisäosa

Jos luit tänne asti, välität todennäköisesti sivustosi suorituskyvystä. Ja se on oikea asenne. Ero "vaikuttaa nopealta" ja "GTmetrix Grade A" välillä johtuu usein pienistä yksityiskohdista, kuten ulkoisista fonteista.

Nopeisiin tuloksiin asenna Local Google Fonts. Viisi minuuttia, ja ulkoiset pyynnöt Googleen katoavat.

Täyteen hallintaan formaattien, välimuistituksen ja fallback-pinojen suhteen valitse manuaalinen tapa Transfonterilla tai google-webfonts-helperillä. Samat 15 minuuttia, mutta tiedät jokaisen tiedoston palvelimellasi.

Tee kummassakin tapauksessa GTmetrix-testi ennen ja jälkeen. "Ennen ja jälkeen" -kuvakaappaukset ovat paras tapa varmistaa, ettet tehnyt tätä kaikkea turhaan.