Kasutasid oma saidil GTmetrixi ja nägid Google Fontsi vigu? Sa pole üksi. Välised päringud aadressile fonts.googleapis.com aeglustavad laadimist ja vahemällu salvestamise pluginad nagu WP Rocket või WP Fastest Cache ei saa tihendada faile, mis asuvad kellegi teise serveris.

Alates 2022. aastast on veel üks põhjus: Saksa kohus otsustas, et Google Fontsi dünaamiline laadimine rikub GDPR-i, sest külastaja IP-aadressid edastatakse ilma nõusolekuta USA-s asuvatesse Google'i serveritesse. Fontide majutamine oma serveris lahendab korraga kolm probleemi: GTmetrixi jõudlus, GDPR-i nõuetele vastavus ja täielik kontroll vahemällu salvestamise üle.

Allpool on samm-sammuline juhend. Alates fondi valimisest Google Fontsis kuni puhta GTmetrixi raportini, kus pole ühtegi välise ressursi viga.

💡 Kiirülevaade:

• Laadi Google Fontsist alla vajalikud fondi paksused
• Teisenda.ttf failid WOFF2 formaati, kasutades Transfonterit või google-webfonts-helperit
• Laadi failid FTP kaudu üles kausta /wp-content/uploads/fonts/
• Lisa @font-face reeglid oma teema CSS-i ja kontrolli renderdamist
• Testi oma saiti uuesti GTmetrixis; Google Fontsi vead peaksid olema kadunud

Miks peaksid fonte kohapeal majutama

Kui brauser laeb lehte, läheb see aadressile fonts.googleapis.com, hangib CSS-i ja seejärel tõmbab tegelikud fondifailid aadressilt fonts.gstatic.com. See on vähemalt kaks välist DNS-päringut ja kaks HTTP-seanssi, mille üle sul puudub kontroll. Vahemällu salvestamise pluginad on siin jõuetud: sa ei saa välist ressurssi tihendada ega selle laadimist edasi lükata.

Kohapealne majutamine muudab pilti. Fondifailid asuvad sinu serveris, samal domeenil, samas CDN-is, samade vahemällu salvestamise reeglitega. Brauser ei lähe kuhugi välisesse kohta ning GTmetrix ja PageSpeed Insights lõpetavad kolmandate osapoolte ressursside üle kurtmise.

Ja jah, GDPR. 2022. aasta jaanuaris otsustas Müncheni regionaalne kohus, et Google Fontsi dünaamiline laadimine ilma kasutaja nõusolekuta rikub GDPR-i. Üle Euroopa vallandus hagide laine ja saidiomanikud hakkasid massiliselt kohapealsele majutamisele üle minema. Fontide ise majutamine on kõige usaldusväärsem lahendus.

1. Samm. Vali Google Fontsis font

Mine Google Fontsi ja leia vajalik font. Selles juhendis kasutan ma Robotot, üht populaarseimat veebifondi, mis toetab ka kirillitsat.

Kaks reeglit, et hoida asjad saledad:

• Minimaalsed paksused. Iga paksus (tavaline, rasvane, kaldkiri) on eraldi fail ja eraldi päring. Kui sinu kujundus kasutab ainult tavalist ja rasvast, eemalda linnukesed ülejäänutelt.
• Minimaalselt fonte. Piirdu ühe või kahe fondiga saidi kohta. Kolmas on jõudluse jaoks juba liig, ükskõik kui ilus see ka ei tunduks.

Mina valisin Roboto Regular (400) ja Roboto Bold (700). Kõik.

2. Samm. Laadi font alla

Fondi lehel klõpsa nuppu „Download family". Google pakendab kõik paksused ZIP-arhiivi. Paksuse valik ei ole selles etapis oluline; arhiiv sisaldab niikuinii kogu perekonda. Filtreerime hiljem.

Paki arhiiv lahti. Meil on vaja faile Roboto-Regular.ttf ja Roboto-Bold.ttf.

3. Samm. Teisenda fondid veebiformaatidesse

Brauserid ei kasuta.ttf-faile otse. Sul on vaja WOFF- ja WOFF2-formaate; need on tihendatud ja laadivad kiiremini. On kaks tööriista, mõlemad tasuta.

Transfonter on klassika: mine saidile transfonter.org, klõpsa „Add fonts" ja laadi üles oma.ttf-failid.

Jätke seaded vaikimisi; WOFF ja WOFF2 katavad kõik kaasaegsed brauserid. EOT-d (vana Internet Exploreri jaoks) pole 2026. aastal vaja. Klõpsake „Convert".

Google-webfonts-helper on moodsam valik spetsiaalselt Google Fontsi jaoks. Teenus aadressil gwfh.mranftl.com genereerib nii WOFF2 failid kui ka kasutusvalmis CSS-i koos @font-face'iga. Fondifaile pole vaja kolmanda osapoole serverisse üles laadida; kõik toimub lokaalselt teie brauseris. Litsentseeritud fontide ja brändi kirjatüüpide puhul on see oluline.

Millise tööriista peaksite valima? Transfonter on ühekordse ülesande jaoks lihtsam. Google-webfonts-helper on mugavam, kui vahetate fonte sageli või töötate kommertskirjatüüpidega, mida te pigem välistesse serveritesse ei laadiks.

Samm 4. Laadige veebifondid oma serverisse

Pärast konverteerimist laadige alla ZIP-fail. Seest leiate.woff ja.woff2 failid iga paksuse jaoks. Roboto Regular ja Bold puhul saate 4 faili:

Laadige need FTP või oma hostingu failihalduri kaudu üles kausta /wp-content/uploads/fonts/. Tee /wp-content/uploads/ on valitud teadlikult: tuuma- ja teemavärskendused seda ei puuduta, erinevalt teemade kaustast.

Pärast üleslaadimist kontrollige, avades brauseris otselingi failile:

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

Brauser peaks alustama allalaadimist. Kui mitte, kontrollige kausta õigusi (peaksid olema 755) ja teed ennast.

Samm 5. Lisage @font-face oma CSS-i

Transfonteri ZIP-arhiiv sisaldab faili stylesheet.css, mis on valmis mall fondi ühendamiseks. Avage see ja kopeerige sisu.

Kleepige kood oma aktiivse teema style.css (või custom.css, kui teie teema seda toetab) kõige ülaossa. Kasutage teid oma reaalses serveris asuvatele failidele, mitte arhiivist pärit teid. Asendage suhtelised URL-id absoluutsetega:

Algne kood failist stylesheet.css:

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

Muutke järgmiseks:

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');

Asendage your-site.com oma domeeniga. Korrake iga paksuse jaoks.

Et fonti oleks lihtne oma märgendis kasutada, lisage alla wrapper-klassid:

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
}

Nüüd kuvatakse iga element, millel on klass roboto_font või roboto_bold_font, Roboto kirjatüübis.

Samm 6. Kontrollige renderdamist

Looge testleht (või avage mõni olemasolev mustandirežiimis) ja kleepige see HTML tekstiredaktorisse:

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>

Avage eelvaade. Esimene pealkiri kasutab teema vaikefonti; teine ja kolmas kasutavad Robotot.

Kui font ei lae, ava brauseri konsool (F12 → Network) ja kontrolli, et WOFF2-failid laaditakse sinu domeenilt, mitte aadressilt fonts.gstatic.com. Vastuse kood peaks olema 200 ja tüüp font/woff2.

Samm 7. Määra font vaikimisi fondiks

Roboto kogu saidil rakendamiseks ilma igale pealkirjale klasse lisamata lisa faili style.css järgmine:

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

Ettevaatust: kui sinu teema kasutab juba kohandatud fonti, otsi failist style.css üles font-family read ja asenda need. Lihtsalt body reegli lisamine olemasoleva peale tekitab konflikti. Veendu, et vanad deklaratsioonid on eemaldatud või kommenteeritud välja.

Samm 8. Määra varufontide pinu

Google Fonts ei ole süsteemsed fondid. Kui brauser ei suuda neid laadida (külastaja on võrguühenduseta, reklaamiblokeerija, ajutine tõrge), jääb leht tekstita. Lahendus on fondipinu.

Vale:

1
font-family: 'Roboto';

Õige, koos varufontidega:

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

Brauser proovib kõigepealt Robotot. Kui see ebaõnnestub, kasutab ta varuna Ariali. Ariali pole? Siis süsteemne sans-serif. Leht on alati loetav, isegi kui kohandatud font ei lae.

Samm 9. Testi oma saiti uuesti GTmetrixis

Käivita GTmetrix uuesti. Jaotis „Waterfall" ei tohiks enam näidata päringuid aadressidele fonts.googleapis.com ega fonts.gstatic.com. Samuti kaob fontide puhul viga „Serve static assets with an efficient cache policy", sest need failid asuvad nüüd sinu serveris ja neid puhverdatakse sinu reeglite järgi.

Kui vead püsivad, kontrolli Waterfalli vahekaarti. Mõni teema või plugin (näiteks Elementor) võib endiselt laadida fonte Google'i CDN-ilt. Järgmine osa aitab.

Alternatiiv laisale: Local Google Fonts plugin

Kui sa ei taha FTP ja CSS-iga tegeleda, on olemas plugin Local Google Fonts. See tuvastab automaatselt kõik sinu teema ja pluginatega kasutatavad Google Fonts fondid, laadib need alla ja serveerib neid sinu serverist.

Plussid: paigalda, aktiveeri, unusta. Miinused: see töötab ainult Google Fonts fontidega (mitte muude väliste fontidega) ega paku peent kontrolli formaatide üle. Enamiku WordPressi saitide jaoks on see enam kui piisav.

Abistav video sellel teemal

Inglise keeles koos iga sammu visuaalse demonstratsiooniga fondi valimisest kuni lõpliku CSS-ini:

⁉️🤔 Korduma kippuvad küsimused

Kas fontide isemajutamine on 2026. aastal kohustuslik?

Juriidilisest vaatenurgast jah, kui sul on külastajaid EL-ist. Müncheni kohus lõi 2022. aastal pretsedendi ja sellest ajast alates on kümned Saksa kohtud kinnitanud: Google Fonts'i dünaamiline laadimine ilma nõusolekuta = GDPR-i rikkumine. Jõudluse vaatenurgast samuti jah: kaks täiendavat DNS-päringut ja vahemällu mitte salvestatav väline ressurss ei muuda sinu saiti kiiremaks. Fontide isemajutamine lahendab mõlemad probleemid korraga. Local Google Fonts'i plugin võtab 5 minutit; käsitsi meetod Transfonteriga võtab 15. Vali selle järgi, kas oled nõus FTP-d kasutama.

Google-webfonts-helper või Transfonter: kumb on parem?

Ühe fondi ühekordsel ühendamisel pole peaaegu mingit vahet. Transfonter on lihtsam: lae üles.ttf-fail, saa WOFF2 ja CSS. Google-webfonts-helper on mugavam, kui fonte sageli vahetada: see ei lae faile kolmanda osapoole serverisse ja genereerib kohe kasutusvalmis @font-face'i koos õigete radadega. Kommertslitsentsiga fontide puhul ainult google-webfonts-helper.

Mida teha, kui fondid pärast lokaalset üleslaadimist ei kuvata?

Kolm tüüpilist põhjust. Esiteks, vale tee url() sees: kontrolli, et link avaneb brauseris ja tagastab faili, mitte 404 veateadet. Teiseks, CORS: kui fondid laaditakse CDN-ilt või alamdomeenilt, peab server tagastama Access-Control-Allow-Origin päise. Kolmandaks, teema konflikt: ava DevTools (F12 → Computed), leia element, millel on sinu font, ja vaata, milline font-family tegelikult rakendub. Sageli kirjutab teema selle kaskaadis madalamal üle.

Kas ma võin fonte majutada CDN-il, mitte oma serveris?

Jah, aga CDN peab olema sinu oma. Põhiprintsiip on, et fonte tuleks serveerida samalt domeenilt (või alamdomeenilt) kui sinu saiti, ilma domeeniüleste päringuteta kolmandate osapoolte serveritesse. Siis toimib vahemällu salvestamine ja GDPR-i ei rikuta.

Kuidas kontrollida, et fondid tõesti laaditakse lokaalselt?

Ava DevTools → Network → Font vahekaart. Värskenda lehte. Kõik fondipäringud peaksid minema sinu domeenile. Kui näed fonts.googleapis.com või fonts.gstatic.com, on väline laadimine kuskil alles. Tõenäoliselt kasutab mõni teema või plugin seda endiselt. Kontrolli seadeid või paigalda Local Google Fonts.

Mida valida: käsitsi üleslaadimine või plugin

Kui sa oled siiani lugenud, siis ilmselt hoolid oma saidi jõudlusest. Ja see on õige suhtumine. Erinevus „tundub kiire" ja „GTmetrix'i hinne A" vahel taandub sageli väikestele detailidele nagu välised fondid.

Kiirete tulemuste saamiseks paigalda Local Google Fonts. Viis minutit ja välised päringud Google'ile kaovad.

Täieliku kontrolli saavutamiseks formaatide, vahemällu salvestamise ja varuvirnade üle vali käsitsi meetod, kasutades Transfonterit või google-webfonts-helperit. Sama 15 minutit, aga sa tead iga faili oma serveris.

Mõlemal juhul tee GTmetrix'i test enne ja pärast. „Enne" ja „pärast" ekraanipildid on parim viis kinnitada, et sa ei teinud seda kõike asjata.