Hogyan szolgáld ki a betűtípusokat helyben a Google Fonts használata helyett

Miért érdemes saját magadnak kiszolgálni a Google Fonts betűtípusait?

A Google Fonts egyszerűvé tette a jó tipográfiát. Hozzáadsz egy stíluslapot, kiválasztasz néhány betűvastagságot, és élesíted az oldalt. Kis csapatok számára ez évekig észszerű alapértelmezés volt.

A kompromisszum az, hogy minden látogató böngészője egy harmadik féltől származó szolgáltatással lép kapcsolatba a betűtípus-CSS és a betűtípusfájlok lekéréséhez. Ennek két következménye van.

Először is külső függőséget ad a megjelenítéshez. Ha a betűtípus-CSS lassú, blokkolt vagy nem érhető el a felhasználó régiójában vagy hálózatán, az oldal várakozik vagy tartalék betűtípusra vált.

Másodszor adatvédelmi kérdést vet fel. Egy betűtípus-kérés felfedheti a felhasználó IP-címét, user agentjét, a referrer policy környezetét és időzítési információkat egy harmadik félnek. A Google Fonts azt állítja, hogy a Fonts API-n keresztül nem állít be cookie-kat, de a „nincs cookie” nem ugyanaz, mint a „nincs személyes adat”. A GDPR szerint az IP-cím kontextustól függően továbbra is személyes adat lehet.

A betűtípusok saját kiszolgálása nem automatikusan kötelező minden webhely számára, és ez nem jogi tanács. De európai webhelyek, közszférabeli oldalak, egészségügyi, oktatási, pénzügyi szolgáltatások, illetve bármely olyan csapat esetében, amely csökkenteni szeretné a szükségtelen harmadik feles kéréseket, a helyi kiszolgálás általában tisztább választás.

Jól megvalósítva gyakran teljesítménybeli előnyt is hoz. A kulcs a „jól megvalósítva”. Ha hat betűtípusfájlt egyszerűen bemásolsz az /assets/fonts/ mappába, és minden oldalon mindet betöltöd, az rosszabb is lehet, mint a hosztolt szolgáltatás használata. Ha a tágabb teljesítménybeli összefüggések érdekelnek, korábbi írásunk arról, hogy a webes betűtípusok még mindig a legtöbb webhely legegyszerűbb teljesítménybeli nyereségét jelentik, bemutatja a gyakori pazarlási mintákat.

Mi változik, ha saját magad szolgálod ki őket?

Amikor a Google Fonts szokásos módon van használatban, az oldal ezt teszi:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

A böngésző először CSS-t kér a fonts.googleapis.com címről, majd betűtípusfájlokat tölt le a fonts.gstatic.com címről.

Saját kiszolgálás esetén az oldalnak a CSS-t és a betűtípusfájlokat is a saját domainedről kell kérnie:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Ezzel megszűnik a harmadik féltől érkező betűtípus-kérés. Ugyanakkor te leszel felelős a fájlformátumok, a cache-fejlécek, a tartalék betűtípusok és a frissítések megválasztásáért.

Ezt a felelősséget érdemes komolyan venni. A betűtípusok a kritikus megjelenítési útvonalon helyezkednek el. Egy gyenge betűtípus-beállítás láthatatlan szöveget, elrendezés-eltolódást és lassú első renderelést okozhat.

1. lépés: Mérd fel, mit használsz ténylegesen

Mielőtt bármit letöltenél, írd össze, hogy a webhelyednek valójában mely betűcsaládokra, vastagságokra, stílusokra és karakterkészletekre van szüksége.

Egy tipikus marketingoldalnak például erre lehet szüksége:

• Regular 400 a törzsszöveghez
• Semibold 600 vagy bold 700 a címsorokhoz és gombokhoz
• Italic 400 csak akkor, ha a design ténylegesen használ dőlt szedést
• Csak latin karakterkészlet, hacsak a webhely nem támogat több nyelvet

Légy óvatos a régi design system alapértelmezésekkel. Sok webhely azért tölt be 300, 400, 500, 600, 700 vastagságot, dőlt változatokat és több írásrendszert, mert valaki egyszer kiválasztotta őket egy betűtípus-választóban.

A böngésző DevTools eszközében nyisd meg a Network panelt, szűrj a „font” kifejezésre, töltsd újra az oldalt, és nézd meg, mely fájlok kerülnek lekérésre. Ezután vizsgáld meg a CSS-edben a font-weight használatát. Ha a CSS soha nem használ 300-at, ne hosztolj 300-at.

Ha később az eredményt értékeled, a Lighthouse segíthet, de ne kezeld a pontszámát teljes igazságként. Diagnosztikai eszközként használd, ne bíróként. Van egy külön útmutatónk arról, hogyan érdemes pánik nélkül értelmezni egy Lighthouse-jelentést, ami hasznos lehet a betűtípus-javítások priorizálásakor.

2. lépés: Töltsd le a megfelelő betűtípusfájlokat

A Google Fonts nyílt forráskódú betűtípusokat kínál. Letöltheted őket a Google Fonts webhelyéről vagy az adott betűtípus projektjének repositoryjából. Ellenőrizd a licencet, de a legtöbb Google Fonts betűtípus nyílt licencek alatt érhető el, például SIL Open Font License vagy Apache License alapján.

Webre a WOFF2-t érdemes előnyben részesíteni. A modern böngészők széles körben támogatják, és általában jóval kisebb, mint a TTF vagy az OTF. 2026-ban a TTF közvetlen kiszolgálása böngészőknek nyilvános webhelyeken ritkán indokolt.

Egy észszerű könyvtárszerkezet így néz ki:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Használj beszédes fájlneveket. Hat hónap múlva a font.woff2 bosszantó lesz. Az inter-latin-600.woff2 unalmas, de hasznos.

Ha a webhelyed build rendszert használ, tartsd a forrás betűtípusokat egy átlátható helyen, és hagyd, hogy a build pipeline az optimalizált fájlokat a nyilvános asset könyvtárba másolja.

3. lépés: Részhalmazold a betűtípusokat, ahol indokolt

A részhalmazolás azt jelenti, hogy eltávolítod azokat a karaktereket, amelyekre nincs szükséged. Egy teljes betűtípus tartalmazhat latin, cirill, görög, vietnámi karaktereket, szimbólumokat és sok OpenType funkciót. Ha egy csak angol nyelvű landing page-nek csak latin karakterekre van szüksége, egy részhalmaz drámaian kisebb lehet.

Két gyakori megközelítés van:

1. Előre elkészített részhalmaz használata a betűtípus-szolgáltatótól vagy repositoryból.
2. Saját részhalmaz létrehozása betűtípus-eszközzel, például a fonttools pyftsubset eszközével.

Sok csapat számára az előre elkészített latin részhalmazok elegendők. Az egyedi részhalmazolás akkor hasznos, ha nagyon korlátozott oldalakról van szó, például egyetlen kampányoldalról kevés szöveggel, vagy olyan termékfelületről, ahol előre jelezhető a szükséges karakterlefedettség.

Többnyelvű webhelyeknél légy óvatos. A hiányzó glyph-ek tartalék betűtípusok keveredéséhez vezetnek, ami hibásnak tűnhet és ronthatja az olvashatóságot. Ha több nyelvet támogatsz, rendeld a betűtípus-részhalmazokat nyelvi útvonalakhoz, ahelyett hogy egyetlen apró részhalmazt erőltetnél mindenhol.

4. lépés: Írd meg az @font-face szabályokat

Egy minimális helyi beállítás így néz ki:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Néhány részlet itt fontos.

A legtöbb tartalmi webhelyen használj font-display: swap beállítást. Ez arra utasítja a böngészőt, hogy gyorsan jelenítse meg a tartalék betűtípussal szedett szöveget, majd amikor megérkezik, cserélje be a webes betűtípust. Így elkerülhető a FOIT legrosszabb változata: a láthatatlan szöveg felvillanása.

Állíts be explicit tartalék betűtípusláncot. Ha az egyedi betűtípus nem töltődik be, a felhasználóknak akkor is olvasható szöveget kell kapniuk. A tartalékok nem utólagos gondolatok; a design részei. Ha újra kell gondolnod a méretezést, a sorhosszt és a törzsszöveg-választásokat, kezdd a modern weben olvasható tipográfia gyakorlati útmutatójával.

Pontosítsd a vastagságokat. Ha a CSS font-weight: 500 értéket kér, de te csak 400-at és 700-at definiálsz, a böngésző szintetizálhat egy köztes vastagságot. Ez nem mindig katasztrófa, de következetlennek tűnhet.

5. lépés: Távolítsd el a külső Google Fonts hívásokat

Miután hozzáadtad a helyi betűtípus-CSS-t, távolítsd el a régi távoli hívásokat a sablonokból.

Ezeket keresd:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Ellenőrizd még ezeket is:

• Theme-beállítások CMS platformokon
• Page-builder tipográfiai panelek
• Harmadik féltől származó widgetek
• Tag managerek
• Régi CSS importok, például @import url('https://fonts.googleapis.com/...')

Az utolsó gyakori. A betűtípusok CSS @import használata általában rosszabb teljesítmény szempontjából, mert késlelteti a felfedezést. Ha saját magad szolgálod ki a betűtípusokat, definiáld őket közvetlenül a fő CSS-ben vagy egy korán betöltött betűtípus-CSS fájlban.

Az adatvédelmi munka gyakran azért bukik el, mert a csapatok kijavítják a nyilvánvaló sablont, de kihagyják a scripteket, widgeteket és örökölt beágyazásokat. Ugyanez a minta látszik a hozzájáruláskezelésben is; útmutatónk arról, mi változott a cookie-k terén 2026-ban, hasznos kiegészítő, ha általánosabban is csökkented a harmadik feleknek kitett felületet.

6. lépés: Állíts be cache-fejléceket

A betűtípusfájlok statikus assetek. Agresszívan cache-elni kell őket, ha a fájlneveik verziózottak vagy tartalomhash-t tartalmaznak.

Egy jó éles környezeti fejléc:

Cache-Control: public, max-age=31536000, immutable

Csak akkor használj hosszú életű immutable cache-elést, ha az URL megváltozik, amikor a fájl megváltozik. Például:

inter-latin-400.a8f3c2.woff2

vagy verziózott útvonal:

/fonts/v2/inter-latin-400.woff2

Ha felülírod a /fonts/inter-latin-400.woff2 fájlt az URL megváltoztatása nélkül, egyes felhasználók hosszú ideig a régi fájlt tarthatják meg. Ez addig rendben van, amíg nem az. A verziózás elkerüli a problémát.

A betűtípusokat a megfelelő MIME típussal is szolgáld ki:

Content-Type: font/woff2

A legtöbb modern hosting platform ezt automatikusan kezeli, de érdemes ellenőrizni.

7. lépés: Csak a kritikus betűtípust fontold meg előbetöltésre

Az előbetöltés segíthet, hogy a böngésző hamarabb felfedezzen egy fontos betűtípust:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Használd takarékosan. Az első képernyőn látható elsődleges szövegbetűtípust preloadold, ne minden betűvastagságot. A túl sok preload versenyez a CSS-sel, a képekkel és a JavaScripttel.

Még same-origin betűtípusoknál is add meg a crossorigin attribútumot a font preloadoknál. A betűtípus-lekérés CORS módban történik, és ennek elhagyása egyes beállításokban duplikált letöltéseket okozhat.

Ha bizonytalan vagy, tesztelj. Ne vegyél át preloadokat vakon csak azért, mert egy ellenőrzőlista ezt mondta.

8. lépés: Teszteld az adatvédelmet és a teljesítményt

A tesztelés egyszerű.

Nyisd meg a DevTools eszközt, töltsd újra az oldalt letiltott cache mellett, és szűrd a Network panelt ezekre:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Azt kell látnod, hogy a betűtípusfájlok a saját domainedről érkeznek, és nincs Google Fonts kérés.

Ezután tesztelj hideg és meleg cache-sel is. Az első látogatáskor a betűtípusoknak egyszer kell letöltődniük. Későbbi látogatásoknál a böngészőtől függően memóriából vagy lemezcache-ből kell érkezniük.

Ellenőrizd az elrendezés-eltolódást, amikor a betűtípus becserélődik. Ha a címsorok ugranak, a tartalék betűtípus metrikái túlságosan eltérnek a webes betűtípustól. A látható eltolódás csökkenthető közelebbi tartalék betűtípus választásával vagy újabb CSS betűtípus-metrika felülírások használatával, például size-adjust, ascent-override, descent-override és line-gap-override. Ezek haladóbb beállítások, de igényes felületeknél hasznosak.

Végül teszteld az oldalakat privát böngészésben vagy bekapcsolt tartalomblokkolókkal. A saját kiszolgálás egyik előnye, hogy az adatvédelmi eszközök kisebb valószínűséggel blokkolják véletlenül a tipográfiádat.

Gyakori hibák, amelyeket érdemes elkerülni

Túl sok vastagság hosztolása

Ez a leggyakoribb hiba. Két vastagság gyakran elég. Három általában bőven elegendő. Öt már design system szagú, hacsak nincs rá erős indok.

A dőlt változatok elfelejtése

Ha a tartalmad valódi kiemelést használ, tölts be valódi dőlt fájlt. A szintetikus dőlt gyengén mutathat, különösen hosszabb szerkesztőségi tartalmakban.

A régi Google CSS link megtartása

Ez érvényteleníti az egész célját. Migráció után egyetlen betűtípus-kérésnek sem szabad a Google felé mennie, hacsak nem egy másik komponens injektálja.

Betűtípusok kiszolgálása hosszú távú cache-elés nélkül

A saját kiszolgálás kontrollt ad. Használd ki. A betűtípusok ideális jelöltek a hosszú cache-élettartamra.

A jogi és dokumentációs munka figyelmen kívül hagyása

Ha az adatvédelmi tájékoztatód korábban említette a Google Fontsot vagy a harmadik féltől történő betűtípus-betöltést, migráció után frissítsd. Ha vezetsz adatkezelési nyilvántartást, azt is frissítsd. A technikai változásnak és a megfelelőségi dokumentációnak összhangban kell lennie.

<!-- tool-cta:start -->

💡 Próbálja ki ezt: Alakítsa át a Google Fonts-ból letöltött TTF-fájlokat önállóan hosztolható WOFF2-vé és CSS-sé a Webfont Generator segítségével.

<!-- tool-cta:end -->

Egyszerű migrációs ellenőrzőlista

1. Írd össze a ténylegesen használt betűcsaládokat, vastagságokat, stílusokat és írásrendszereket.
2. Tölts le WOFF2 fájlokat, és ellenőrizd a licencet.
3. Részhalmazold a betűtípusokat, ha a webhely nyelvi igényei ezt lehetővé teszik.
4. Adj hozzá helyi @font-face szabályokat font-display: swap beállítással.
5. Távolíts el minden Google Fonts link, preconnect és @import hivatkozást.
6. Szolgáld ki a betűtípusokat a saját domainedről hosszú életű cache-fejlécekkel.
7. Csak a legfontosabb, első képernyőn látható betűtípust preloadold, ha a tesztelés ezt alátámasztja.
8. Ellenőrizd a DevToolsban, hogy nem maradtak Google Fonts kérések.
9. Szükség esetén frissítsd az adatvédelmi dokumentációt.

A betűtípusok saját kiszolgálása nem látványos munka. Olyan kis infrastruktúra-takarítás, amely csökkenti a függőségi kockázatot, javítja az adatvédelmi helyzetet, és kiszámíthatóbb renderelést ad. Ez általában megéri azt az egy-két órát, amibe kerül.