Kaip talpinti šriftus lokaliai, užuot naudojus Google Fonts

Kodėl verta savarankiškai talpinti Google Fonts?

Google Fonts palengvino geros tipografijos naudojimą. Pridedate stilių failą, pasirenkate kelis storius ir išleidžiate puslapį. Daugelį metų mažoms komandoms tai buvo protingas numatytasis pasirinkimas.

Kompromisas tas, kad kiekvieno lankytojo naršyklė kreipiasi į trečiosios šalies paslaugą, kad gautų šrifto CSS ir šriftų failus. Tai turi dvi pasekmes.

Pirma, atvaizdavimui pridedama išorinė priklausomybė. Jei šrifto CSS yra lėtas, blokuojamas arba nepasiekiamas naudotojo regione ar tinkle, jūsų puslapis laukia arba grįžta prie atsarginio varianto.

Antra, kyla privatumo klausimas. Šrifto užklausa trečiajai šaliai gali atskleisti naudotojo IP adresą, user agent, referrer policy kontekstą ir laiko informaciją. Google Fonts teigia, kad per Fonts API nenustato slapukų, tačiau „be slapukų“ nėra tas pats, kas „be asmens duomenų“. Pagal GDPR IP adresas tam tikrame kontekste vis tiek gali būti asmens duomenys.

Savarankiškas šriftų talpinimas nėra automatiškai būtinas kiekvienai svetainei, ir tai nėra teisinė konsultacija. Tačiau Europos svetainėms, viešojo sektoriaus svetainėms, sveikatos priežiūros, švietimo, finansų projektams arba bet kuriai komandai, siekiančiai sumažinti nereikalingas trečiųjų šalių užklausas, vietinis talpinimas paprastai yra švaresnis pasirinkimas.

Tinkamai atliktas, jis taip pat dažnai pagerina našumą. Svarbiausia čia — „tinkamai atliktas“. Nukopijuoti šešis šriftų failus į /assets/fonts/ ir įkelti juos visus kiekviename puslapyje gali būti blogiau nei naudoti talpinamą paslaugą. Jei norite platesnio našumo konteksto, ankstesnis mūsų tekstas apie tai, kodėl žiniatinklio šriftai daugelyje svetainių vis dar yra lengviausias našumo pagerinimas, apžvelgia įprastus švaistymo modelius.

Kas pasikeičia talpinant savarankiškai

Kai Google Fonts naudojate įprastu būdu, jūsų puslapis daro tai:

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

Naršyklė pirmiausia prašo CSS iš fonts.googleapis.com, tada atsisiunčia šriftų failus iš fonts.gstatic.com.

Kai talpinate savarankiškai, jūsų puslapis turėtų prašyti ir CSS, ir šriftų failų iš jūsų pačių domeno:

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

Tai pašalina trečiosios šalies šrifto užklausą. Taip pat reiškia, kad jūs tampate atsakingi už failų formatų, talpyklos antraščių, atsarginių šriftų ir atnaujinimų pasirinkimą.

Į šią atsakomybę verta žiūrėti rimtai. Šriftai yra kritiniame atvaizdavimo kelyje. Prastai sukonfigūruoti šriftai gali sukelti nematomą tekstą, maketo poslinkius ir lėtą pirmąjį atvaizdavimą.

1 žingsnis: patikrinkite, ką iš tikrųjų naudojate

Prieš ką nors atsisiųsdami, išvardykite šriftų šeimas, storius, stilius ir ženklų rinkinius, kurių jūsų svetainei iš tiesų reikia.

Tipinei rinkodaros svetainei gali reikėti:

• Regular 400 pagrindiniam tekstui
• Semibold 600 arba bold 700 antraštėms ir mygtukams
• Italic 400 tik jei dizainas iš tikrųjų naudoja kursyvą
• Tik lotyniško ženklų rinkinio, nebent svetainė palaiko daugiau kalbų

Į senus dizaino sistemos numatytuosius nustatymus žiūrėkite įtariai. Daug svetainių įkelia 300, 400, 500, 600, 700, kursyvus ir kelis raštus vien todėl, kad kažkas kadaise juos pasirinko šriftų parinkiklyje.

Naršyklės DevTools atverkite Network skydelį, filtruokite pagal „font“, perkraukite puslapį ir patikrinkite, kurie failai užklausiami. Tada peržiūrėkite CSS ir font-weight naudojimą. Jei jūsų CSS niekada nenaudoja 300, netalpinkite 300.

Jei poveikį vertinsite vėliau, Lighthouse gali padėti, bet nelaikykite jo balo visa istorija. Naudokite jį kaip diagnostikos įrankį, o ne teisėją. Turime atskirą vadovą, kaip skaityti Lighthouse ataskaitą nepanikuojant; jis naudingas prioritetizuojant šriftų taisymus.

2 žingsnis: atsisiųskite tinkamus šriftų failus

Google Fonts siūlo atvirojo kodo šriftus. Juos galite atsisiųsti iš Google Fonts svetainės arba atitinkamo šrifto projekto saugyklos. Patikrinkite licenciją, tačiau dauguma Google Fonts platinami pagal atviras licencijas, tokias kaip SIL Open Font License arba Apache License.

Žiniatinkliui rinkitės WOFF2. Jį plačiai palaiko šiuolaikinės naršyklės, o failai paprastai yra gerokai mažesni nei TTF ar OTF. 2026 m. tiesiogiai naršyklėms teikti TTF viešosioms svetainėms retai kada pagrįsta.

Protinga katalogų struktūra atrodo taip:

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

Naudokite aprašomuosius failų pavadinimus. Po šešių mėnesių font.woff2 erzins. inter-latin-600.woff2 yra nuobodus, bet naudingas.

Jei jūsų svetainė naudoja build sistemą, šaltinio šriftus laikykite aiškioje vietoje, o build procesui leiskite nukopijuoti optimizuotus failus į viešųjų išteklių katalogą.

3 žingsnis: kurkite šriftų poaibius, kai tai tinka

Poaibių kūrimas reiškia nereikalingų ženklų pašalinimą. Pilnas šriftas gali apimti lotynų, kirilicą, graikų, vietnamiečių ženklus, simbolius ir daug OpenType funkcijų. Jei jūsų tik anglų kalbos nukreipimo puslapiui reikia tik lotyniškų ženklų, poaibis gali būti gerokai mažesnis.

Yra du įprasti būdai:

1. Naudoti iš anksto parengtą poaibį iš šrifto tiekėjo ar saugyklos.
2. Susikurti savo poaibį naudojant šriftų įrankį, pavyzdžiui, pyftsubset iš fonttools.

Daugeliui komandų pakanka iš anksto parengtų lotyniškų poaibių. Individualus poaibių kūrimas naudingas, kai puslapiai labai riboti, pavyzdžiui, vienas kampanijos puslapis su nedaug teksto arba produkto UI su nuspėjama ženklų aprėptimi.

Būkite atsargūs su daugiakalbėmis svetainėmis. Trūkstami glifai sukelia atsarginių šriftų maišymą, kuris gali atrodyti sugadintas ir bloginti skaitomumą. Jei palaikote kelias kalbas, susiekite šriftų poaibius su kalbų maršrutais, užuot visur prievarta naudoję vieną mažytį poaibį.

4 žingsnis: parašykite @font-face taisykles

Minimalus vietinis nustatymas atrodo taip:

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

Čia svarbios kelios detalės.

Daugumai turinio svetainių naudokite font-display: swap. Tai nurodo naršyklei greitai parodyti tekstą atsarginiu šriftu, o atėjus žiniatinklio šriftui jį pakeisti. Taip išvengiama blogiausios FOIT versijos: nematomo teksto blyksnio.

Nustatykite aiškią atsarginių šriftų seką. Jei pasirinktinis šriftas nepavyksta, naudotojai vis tiek turėtų gauti skaitomą tekstą. Atsarginiai šriftai nėra smulkmena po visko; jie yra dizaino dalis. Jei reikia iš naujo peržiūrėti dydžius, eilutės ilgį ir pagrindinio teksto sprendimus, pradėkite nuo praktiško skaitomo šrifto šiuolaikiniame žiniatinklyje vadovo.

Teisingai suderinkite storius. Jei jūsų CSS prašo font-weight: 500, bet apibrėžiate tik 400 ir 700, naršyklė gali susintetinti tarpinį storį. Tai ne visada blogai, bet gali atrodyti nenuosekliai.

5 žingsnis: pašalinkite išorinius Google Fonts kvietimus

Pridėję vietinį šriftų CSS, pašalinkite senus nuotolinius kvietimus iš šablonų.

Ieškokite:

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

Taip pat patikrinkite:

• Temų nustatymus CMS platformose
• Page-builder tipografijos skydelius
• Trečiųjų šalių valdiklius
• Tag managers
• Senus CSS importus, pvz., @import url('https://fonts.googleapis.com/...')

Pastarasis atvejis dažnas. CSS @import šriftams paprastai blogesnis našumui, nes atideda aptikimą. Jei talpinate savarankiškai, šriftus apibrėžkite tiesiai pagrindiniame CSS arba anksti įkeliamame šriftų CSS faile.

Privatumo darbai dažnai nepavyksta, nes komandos sutvarko akivaizdų šabloną, bet praleidžia scenarijus, valdiklius ir senus įterpinius. Tas pats modelis matomas ir sutikimų tvarkyme; mūsų vadovas apie tai, kas pasikeitė slapukams 2026 m., yra naudingas palydovas, jei plačiau mažinate trečiųjų šalių paviršių.

6 žingsnis: nustatykite talpyklos antraštes

Šriftų failai yra statiniai ištekliai. Jei jų failų pavadinimai versijuojami arba turi turinio hash, jie turėtų būti agresyviai talpinami cache.

Gera production antraštė yra:

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

Ilgalaikį immutable talpinimą naudokite tik tada, jei pasikeitus failui pasikeičia ir URL. Pavyzdžiui:

inter-latin-400.a8f3c2.woff2

arba versijuotas kelias:

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

Jei perrašysite /fonts/inter-latin-400.woff2 nepakeitę URL, kai kurie naudotojai seną failą gali laikyti ilgai. Tai gerai, kol nebegerai. Versijavimas išvengia problemos.

Taip pat teikite šriftus su teisingu MIME tipu:

Content-Type: font/woff2

Dauguma šiuolaikinių talpinimo platformų tai tvarko automatiškai, bet verta patikrinti.

7 žingsnis: apsvarstykite tik kritinio šrifto preload

Preloading gali padėti naršyklei anksčiau aptikti svarbų šriftą:

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

Naudokite tai saikingai. Preload taikykite pagrindiniam virš pirmo ekrano matomam teksto šriftui, o ne kiekvienam šrifto storiui. Perteklinis preloading konkuruoja su CSS, vaizdais ir JavaScript.

Net ir tos pačios kilmės šriftams į šriftų preload įtraukite crossorigin. Šriftų gavimas naudoja CORS režimą, o jo praleidimas kai kuriose konfigūracijose gali sukelti dvigubus atsisiuntimus.

Jei nesate tikri, testuokite. Nekopijuokite preload aklai vien todėl, kad taip parašyta kontroliniame sąraše.

8 žingsnis: testuokite privatumą ir našumą

Testavimas paprastas.

Atverkite DevTools, perkraukite puslapį išjungę cache ir Network skydelyje filtruokite pagal:

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

Turėtumėte matyti šriftų failus, teikiamus iš jūsų domeno, ir jokių Google Fonts užklausų.

Tada testuokite su šalta ir šilta cache. Pirmo apsilankymo metu šriftai turėtų atsisiųsti vieną kartą. Vėlesnių apsilankymų metu jie turėtų ateiti iš atminties arba disko cache, priklausomai nuo naršyklės.

Patikrinkite, ar keičiantis šriftui nevyksta maketo poslinkių. Jei antraštės šokinėja, jūsų atsarginio šrifto metrikos per daug skiriasi nuo žiniatinklio šrifto. Matomą poslinkį galite sumažinti pasirinkdami artimesnį atsarginį šriftą arba naudodami naujesnius CSS šrifto metrikų perrašymus, tokius kaip size-adjust, ascent-override, descent-override ir line-gap-override. Tai pažangesni metodai, bet naudingi nugludintoms sąsajoms.

Galiausiai testuokite puslapius privačiame naršyme arba su įjungtais turinio blokatoriais. Vienas savarankiško talpinimo privalumų yra tas, kad privatumo įrankiai rečiau netyčia blokuos jūsų tipografiją.

Dažnos klaidos, kurių reikėtų vengti

Per daug talpinamų storių

Tai dažniausia nesėkmė. Dažnai pakanka dviejų storių. Trijų paprastai visiškai gana. Penki yra dizaino sistemos įspėjamasis ženklas, nebent turite rimtą priežastį.

Pamirštamas kursyvas

Jei jūsų turinys naudoja tikrą pabrėžimą, įkelkite tikrą italic failą. Sintetiniai kursyvai gali atrodyti prastai, ypač ilgesniame redakciniame turinyje.

Paliekama sena Google CSS nuoroda

Tai panaikina visą prasmę. Po migracijos jokia šrifto užklausa neturėtų keliauti į Google, nebent ją įterpia kitas komponentas.

Šriftai teikiami be ilgalaikio cache

Savarankiškas talpinimas suteikia kontrolę. Pasinaudokite ja. Šriftai yra idealūs kandidatai ilgam talpyklos galiojimo laikui.

Ignoruojamas teisinis ir dokumentacijos darbas

Jei jūsų privatumo politikoje anksčiau buvo minima Google Fonts arba trečiųjų šalių šriftų įkėlimas, po migracijos ją atnaujinkite. Jei prižiūrite duomenų tvarkymo inventorių, atnaujinkite ir jį. Techninis pokytis ir atitikties įrašai turėtų sutapti.

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

💡 Išbandykite tai: Konvertuokite TTF failus, kuriuos atsisiuntėte iš Google Fonts, į savarankiškai talpinamus WOFF2 ir CSS naudodami Webfont Generator.

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

Paprastas migracijos kontrolinis sąrašas

1. Išvardykite šriftų šeimas, storius, stilius ir raštus, kuriuos iš tikrųjų naudojate.
2. Atsisiųskite WOFF2 failus ir patvirtinkite licenciją.
3. Kurkite šriftų poaibius, jei svetainės kalbiniai poreikiai riboti.
4. Pridėkite vietines @font-face taisykles su font-display: swap.
5. Pašalinkite visas Google Fonts link, preconnect ir @import nuorodas.
6. Teikite šriftus iš savo domeno su ilgalaikėmis cache antraštėmis.
7. Preload taikykite tik svarbiausiam virš pirmo ekrano esančiam šriftui, jei testai tai patvirtina.
8. DevTools patikrinkite, kad neliktų jokių Google Fonts užklausų.
9. Jei reikia, atnaujinkite privatumo dokumentaciją.

Savarankiškas šriftų talpinimas nėra įspūdingas darbas. Tai nedidelis infrastruktūros sutvarkymas, kuris sumažina priklausomybių riziką, pagerina privatumo laikyseną ir suteikia labiau nuspėjamą atvaizdavimą. Paprastai tai verta tos vienos ar dviejų valandų.