Cum să găzduiești fonturile local în loc să folosești Google Fonts

De ce să găzduiești local Google Fonts?

Google Fonts a făcut tipografia bună ușor de folosit. Adaugi o foaie de stil, alegi câteva grosimi, publici pagina. Ani la rând, aceasta a fost opțiunea implicită rezonabilă pentru echipe mici.

Compromisul este că browserul fiecărui vizitator contactează un serviciu terț pentru a prelua CSS-ul fontului și fișierele de font. Asta are două consecințe.

În primul rând, adaugă o dependență externă în randare. Dacă CSS-ul fontului este lent, blocat sau indisponibil în regiunea ori rețeaua utilizatorului, pagina ta așteaptă sau revine la fonturile de rezervă.

În al doilea rând, creează o întrebare de confidențialitate. O cerere pentru font poate dezvălui către un terț adresa IP a utilizatorului, user agent-ul, contextul politicii de referrer și informații de temporizare. Google Fonts afirmă că nu setează cookie-uri prin Fonts API, dar „fără cookie-uri” nu este același lucru cu „fără date personale”. În temeiul GDPR, o adresă IP poate fi în continuare dată personală în context.

Găzduirea locală a fonturilor nu este automat necesară pentru fiecare website, iar acesta nu este un sfat juridic. Dar pentru site-uri europene, site-uri din sectorul public, sănătate, educație, finanțe sau orice echipă care încearcă să reducă cererile inutile către terți, găzduirea locală este de obicei alegerea mai curată.

Este, de asemenea, adesea un câștig de performanță atunci când este făcută bine. Partea importantă este „făcută bine”. Copierea a șase fișiere de font în /assets/fonts/ și încărcarea lor pe toate paginile poate fi mai rea decât folosirea serviciului găzduit. Dacă vrei contextul mai larg de performanță, articolul nostru anterior despre de ce fonturile web sunt încă cel mai simplu câștig de performanță pe majoritatea site-urilor acoperă tiparele comune de risipă.

Ce se schimbă când găzduiești local

Când folosești Google Fonts în mod obișnuit, pagina ta face asta:

<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">

Browserul solicită mai întâi CSS de la fonts.googleapis.com, apoi descarcă fișierele de font de la fonts.gstatic.com.

Când găzduiești local, pagina ta ar trebui să solicite atât CSS-ul, cât și fișierele de font de pe propriul domeniu:

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

Asta elimină cererea de font către terți. De asemenea, te face responsabil pentru alegerea formatelor de fișiere, a antetelor de cache, a fonturilor de rezervă și a actualizărilor.

Această responsabilitate merită tratată serios. Fonturile se află pe traseul critic de randare. O configurare slabă a fonturilor poate provoca text invizibil, schimbări de layout și o primă randare lentă.

Pasul 1: Auditează ce folosești cu adevărat

Înainte să descarci ceva, listează familiile de fonturi, grosimile, stilurile și seturile de caractere de care site-ul tău are cu adevărat nevoie.

Un site tipic de marketing ar putea avea nevoie de:

• Regular 400 pentru textul de corp
• Semibold 600 sau bold 700 pentru titluri și butoane
• Italic 400 doar dacă designul chiar folosește italice
• Doar setul de caractere latin, cu excepția cazului în care site-ul suportă mai multe limbi

Privește cu suspiciune setările implicite vechi din design system. Multe site-uri încarcă 300, 400, 500, 600, 700, italice și mai multe scripturi pentru că cineva le-a selectat cândva într-un selector de fonturi.

În browser DevTools, deschide panoul Network, filtrează după „font”, reîncarcă pagina și verifică ce fișiere sunt solicitate. Apoi inspectează CSS-ul pentru utilizarea font-weight. Dacă CSS-ul tău nu folosește niciodată 300, nu găzdui 300.

Dacă revizuiești impactul mai târziu, Lighthouse poate ajuta, dar nu trata scorul lui ca pe întreaga poveste. Folosește-l ca instrument de diagnostic, nu ca judecător. Avem un ghid separat despre cum să citești un raport Lighthouse fără panică, util atunci când prioritizezi remedierile pentru fonturi.

Pasul 2: Descarcă fișierele de font potrivite

Google Fonts oferă fonturi open-source. Le poți descărca de pe website-ul Google Fonts sau din repository-ul relevant al proiectului de font. Verifică licența, dar majoritatea fonturilor Google Fonts sunt distribuite sub licențe deschise, precum SIL Open Font License sau Apache License.

Pentru web, preferă WOFF2. Este suportat pe scară largă de browserele moderne și este de obicei mult mai mic decât TTF sau OTF. În 2026, servirea directă a TTF către browsere este rareori justificată pentru website-uri publice.

O structură rezonabilă de directoare arată așa:

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

Folosește nume de fișiere descriptive. Peste șase luni, font.woff2 va fi enervant. inter-latin-600.woff2 este banal și util.

Dacă site-ul tău folosește un sistem de build, păstrează fonturile sursă într-un loc clar și lasă pipeline-ul de build să copieze fișierele optimizate în directorul public de assets.

Pasul 3: Subîmpărțește fonturile unde este cazul

Subîmpărțirea înseamnă eliminarea caracterelor de care nu ai nevoie. Un font complet poate include latin, chirilic, grec, vietnamez, simboluri și multe funcții OpenType. Dacă pagina ta de landing doar în engleză are nevoie doar de caractere latine, un subset poate fi dramatic mai mic.

Există două abordări comune:

1. Folosește un subset preconstruit de la furnizorul fontului sau din repository.
2. Generează propriul subset cu un instrument pentru fonturi, cum ar fi pyftsubset din fonttools.

Pentru multe echipe, subseturile Latin preconstruite sunt suficiente. Subîmpărțirea personalizată este utilă când ai pagini foarte constrânse, cum ar fi o singură pagină de campanie cu text limitat sau o interfață de produs cu acoperire predictibilă a caracterelor.

Ai grijă la site-urile multilingve. Glifele lipsă provoacă amestecarea fonturilor de rezervă, ceea ce poate arăta defect și poate afecta lizibilitatea. Dacă suporți mai multe limbi, mapează subseturile de fonturi la rutele de limbă, în loc să forțezi un singur subset minuscul peste tot.

Pasul 4: Scrie regulile @font-face

O configurare locală minimă arată așa:

@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;
}

Câteva detalii contează aici.

Folosește font-display: swap pentru majoritatea site-urilor de conținut. Îi spune browserului să afișeze rapid textul cu fontul de rezervă, apoi să îl schimbe cu fontul web când acesta sosește. Asta evită cea mai rea versiune de FOIT: flash of invisible text.

Setează o stivă explicită de fallback. Dacă fontul personalizat eșuează, utilizatorii ar trebui să primească în continuare text lizibil. Fonturile de rezervă nu sunt o idee de final; ele fac parte din design. Dacă trebuie să revizuiești dimensiunile, lungimea rândurilor și alegerile pentru textul de corp, începe cu un ghid practic pentru tipografie lizibilă pe webul modern.

Potrivește corect grosimile. Dacă CSS-ul tău cere font-weight: 500, dar tu definești doar 400 și 700, browserul poate sintetiza o grosime intermediară. Nu este întotdeauna groaznic, dar poate arăta inconsistent.

Pasul 5: Elimină apelurile externe către Google Fonts

După ce adaugi CSS-ul local pentru fonturi, elimină vechile apeluri remote din template-uri.

Caută:

<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">

Verifică și:

• Setările temei în platforme CMS
• Panourile de tipografie din page builders
• Widgeturile terțe
• Tag managers
• Importurile CSS vechi, cum ar fi @import url('https://fonts.googleapis.com/...')

Ultimul caz este frecvent. CSS @import pentru fonturi este de obicei mai slab pentru performanță, deoarece întârzie descoperirea. Dacă găzduiești local, definește fonturile direct în CSS-ul principal sau într-un fișier CSS de font încărcat devreme.

Munca de confidențialitate eșuează adesea pentru că echipele repară template-ul evident, dar ratează scripturi, widgeturi și embeduri vechi. Același tipar apare și în munca de consimțământ; ghidul nostru despre ce s-a schimbat pentru cookie-uri în 2026 este un companion util dacă reduci mai amplu suprafața expusă terților.

Pasul 6: Setează antetele de cache

Fișierele de font sunt assets statice. Ar trebui cache-uite agresiv dacă numele lor de fișier sunt versionate sau au content hash.

Un antet bun de producție este:

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

Folosește cache immutable pe termen lung doar dacă URL-ul se schimbă când fișierul se schimbă. De exemplu:

inter-latin-400.a8f3c2.woff2

sau o cale versionată:

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

Dacă suprascrii /fonts/inter-latin-400.woff2 fără să schimbi URL-ul, unii utilizatori pot păstra fișierul vechi mult timp. Este în regulă până când nu mai este. Versionarea evită problema.

Servește fonturile și cu tipul MIME corect:

Content-Type: font/woff2

Majoritatea platformelor moderne de hosting gestionează automat acest lucru, dar merită verificat.

Pasul 7: Ia în calcul preload doar pentru fontul critic

Preload poate ajuta browserul să descopere mai devreme un font important:

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

Folosește asta cu măsură. Fă preload pentru fontul principal al textului above-the-fold, nu pentru fiecare grosime de font. Preload excesiv concurează cu CSS, imagini și JavaScript.

Chiar și pentru fonturi same-origin, include crossorigin pe preload-urile de fonturi. Preluarea fonturilor folosește modul CORS, iar omiterea lui poate provoca descărcări duplicate în unele configurări.

Dacă nu ești sigur, testează. Nu copia mecanic preload-uri doar pentru că așa spune o listă de verificare.

Pasul 8: Testează confidențialitatea și performanța

Testarea este simplă.

Deschide DevTools, reîncarcă pagina cu cache-ul dezactivat și filtrează panoul Network după:

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

Ar trebui să vezi fișiere de font servite de pe propriul domeniu și nicio cerere către Google Fonts.

Apoi testează cu cache rece și cu cache cald. La prima vizită, fonturile ar trebui să se descarce o singură dată. La vizitele ulterioare, ar trebui să vină din memoria cache sau din cache-ul de pe disc, în funcție de browser.

Verifică dacă apare layout shift când fontul este schimbat. Dacă titlurile sar, metricele fontului de rezervă diferă prea mult de fontul web. Poți reduce schimbarea vizibilă alegând un fallback mai apropiat sau folosind suprascrieri mai noi ale metricilor de font în CSS, precum size-adjust, ascent-override, descent-override și line-gap-override. Acestea sunt mai avansate, dar utile pentru interfețe finisate.

În final, testează paginile în navigare privată sau cu blocatoare de conținut activate. Un beneficiu al găzduirii locale este că instrumentele de confidențialitate sunt mai puțin susceptibile să îți blocheze accidental tipografia.

Greșeli comune de evitat

Găzduirea prea multor grosimi

Aceasta este cea mai comună problemă. Două grosimi sunt adesea suficiente. Trei sunt de obicei mai mult decât destul. Cinci indică un miros de design system, cu excepția cazului în care ai un motiv puternic.

Uitarea italicelor

Dacă textul tău folosește accentuare reală, încarcă un fișier italic real. Italicele sintetice pot arăta slab, mai ales în conținut editorial de lungă formă.

Păstrarea vechiului link CSS Google

Asta anulează scopul. După migrare, nicio cerere de font nu ar trebui să ajungă la Google, cu excepția cazului în care o altă componentă o injectează.

Servirea fonturilor fără cache pe termen lung

Găzduirea locală îți oferă control. Folosește-l. Fonturile sunt candidați ideali pentru durate lungi de cache.

Ignorarea muncii juridice și de documentare

Dacă politica ta de confidențialitate menționa anterior Google Fonts sau încărcarea fonturilor de la terți, actualizeaz-o după migrare. Dacă menții un inventar al prelucrărilor de date, actualizează-l și pe acela. Schimbarea tehnică și evidența de conformitate ar trebui să fie aliniate.

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

💡 Încercați asta: Convertiți fișierele TTF pe care le-ați descărcat de pe Google Fonts în WOFF2 auto-găzduibil plus CSS cu Webfont Generator.

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

O listă simplă de verificare pentru migrare

1. Listează familiile de fonturi, grosimile, stilurile și scripturile pe care le folosești efectiv.
2. Descarcă fișiere WOFF2 și confirmă licența.
3. Subîmpărțește fonturile dacă site-ul are nevoi lingvistice limitate.
4. Adaugă reguli locale @font-face cu font-display: swap.
5. Elimină toate referințele Google Fonts de tip link, preconnect și @import.
6. Servește fonturile de pe propriul domeniu cu antete de cache pe termen lung.
7. Fă preload doar pentru cel mai important font above-the-fold, dacă testele susțin asta.
8. Verifică în DevTools că nu mai rămân cereri către Google Fonts.
9. Actualizează documentația de confidențialitate dacă este necesar.

Găzduirea locală a fonturilor nu este o muncă spectaculoasă. Este genul de curățenie mică de infrastructură care reduce riscul de dependențe, îmbunătățește postura de confidențialitate și îți oferă randare mai predictibilă. De obicei, merită ora sau două pe care le cere.