Како локално хостовати фонтове уместо коришћења Google Fonts

Зашто самостално хостовати Google Fonts?

Google Fonts је олакшао добру типографију. Додате stylesheet, изаберете неколико дебљина, објавите страницу. Годинама је то био разуман подразумевани избор за мале тимове.

Компромис је у томе што браузер сваког посетиоца контактира услугу треће стране да би преузео CSS за фонтове и саме фајлове фонтова. То има две последице.

Прво, додаје спољну зависност у рендеровање. Ако је CSS за фонтове спор, блокиран или недоступан у региону или мрежи корисника, ваша страница чека или се враћа на резервни фонт.

Друго, отвара питање приватности. Захтев за фонт може трећој страни открити IP адресу корисника, user agent, контекст referrer policy и информације о времену захтева. Google Fonts наводи да не поставља колачиће преко Fonts API, али „без колачића“ није исто што и „без личних података“. Према GDPR, IP адреса и даље може бити лични податак у одређеном контексту.

Самостално хостовање фонтова није аутоматски неопходно за сваки веб-сајт, и ово није правни савет. Али за европске сајтове, сајтове јавног сектора, здравство, образовање, финансије или било који тим који покушава да смањи непотребне захтеве ка трећим странама, локално хостовање је обично чистији избор.

Често је и добитак у перформансама када се уради како треба. Кључно је „како треба“. Копирање шест фајлова фонтова у /assets/fonts/ и њихово учитавање на свакој страници може бити горе од коришћења хостоване услуге. Ако желите шири контекст перформанси, наш ранији текст о томе зашто су веб фонтови и даље најлакша добит у перформансама на већини сајтова покрива уобичајене обрасце расипања.

Шта се мења када самостално хостујете

Када користите Google Fonts на уобичајен начин, ваша страница ради ово:

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

Браузер прво тражи CSS са fonts.googleapis.com, а затим преузима фајлове фонтова са fonts.gstatic.com.

Када самостално хостујете, ваша страница треба да тражи и CSS и фајлове фонтова са вашег домена:

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

Тиме се уклања захтев за фонт ка трећој страни. Такође, ви постајете одговорни за избор формата фајлова, cache headers, резервне фонтове и ажурирања.

Ту одговорност вреди схватити озбиљно. Фонтови се налазе на критичној путањи рендеровања. Лоше подешавање фонтова може изазвати невидљив текст, померања распореда и споро прво рендеровање.

Корак 1: Проверите шта заиста користите

Пре него што било шта преузмете, наведите породице фонтова, дебљине, стилове и скупове знакова који су вашем сајту заиста потребни.

Типичан маркетиншки сајт може имати потребу за:

• Regular 400 за основни текст
• Semibold 600 или bold 700 за наслове и дугмад
• Italic 400 само ако дизајн заиста користи курзив
• Само латинични скуп знакова, осим ако сајт подржава више језика

Будите опрезни са старим подразумеваним вредностима у design-system-у. Многи сајтови учитавају 300, 400, 500, 600, 700, курзиве и више писама зато што их је неко једном изабрао у бирачу фонтова.

У DevTools браузера отворите Network panel, филтрирајте по „font“, поново учитајте страницу и проверите који се фајлови траже. Затим прегледајте CSS за употребу font-weight. Ако ваш CSS никада не користи 300, немојте хостовати 300.

Ако касније прегледате утицај, Lighthouse може помоћи, али његов резултат немојте посматрати као целу причу. Користите га као дијагностички алат, не као судију. Имамо посебан водич о читању Lighthouse извештаја без панике, који је користан када приоритизујете исправке фонтова.

Корак 2: Преузмите праве фајлове фонтова

Google Fonts нуди фонтове отвореног кода. Можете их преузети са веб-сајта Google Fonts или из одговарајућег репозиторијума пројекта фонта. Проверите лиценцу, али већина Google Fonts фонтова дистрибуира се под отвореним лиценцама као што су SIL Open Font License или Apache License.

За веб, дајте предност WOFF2. Широко је подржан у модерним браузерима и обично је много мањи од TTF или OTF. У 2026, директно испоручивање TTF-а браузерима ретко је оправдано за јавне веб-сајтове.

Разумна структура директоријума изгледа овако:

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

Користите описне називе фајлова. Шест месеци касније, font.woff2 ће бити напоран. inter-latin-600.woff2 је досадан и користан.

Ако ваш сајт користи build system, држите изворне фонтове на јасном месту и нека build pipeline копира оптимизоване фајлове у директоријум јавних assets.

Корак 3: Сузите скупове знакова где је прикладно

Subsetting значи уклањање знакова који вам нису потребни. Пун фонт може садржати латиницу, ћирилицу, грчко писмо, вијетнамске знакове, симболе и многе OpenType функције. Ако је вашој landing page на енглеском потребна само латиница, subset може бити драматично мањи.

Постоје два уобичајена приступа:

1. Користите унапред припремљен subset од добављача фонта или из репозиторијума.
2. Генеришите сопствени subset помоћу алата за фонтове као што је pyftsubset из fonttools.

За многе тимове, унапред припремљени латинични subset-ови су довољни. Прилагођено сужавање је корисно када имате врло ограничене странице, као што је једна campaign page са ограниченим текстом, или product UI са предвидљивом покривеношћу знакова.

Будите опрезни са вишејезичним сајтовима. Недостајући glyphs изазивају мешање резервних фонтова, што може изгледати покварено и нашкодити читљивости. Ако подржавате више језика, мапирајте subset-ове фонтова на језичке руте уместо да један мали subset форсирате свуда.

Корак 4: Напишите своја @font-face правила

Минимално локално подешавање изгледа овако:

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

Неколико детаља је овде важно.

Користите font-display: swap за већину content сајтова. То говори браузеру да брзо прикаже текст резервним фонтом, а затим замени веб фонтом када стигне. Тако се избегава најгора верзија FOIT: flash of invisible text.

Поставите експлицитан fallback stack. Ако прилагођени фонт не успе да се учита, корисници и даље треба да добију читљив текст. Резервни фонтови нису накнадна мисао; они су део дизајна. Ако треба да се вратите на величине, дужину реда и изборе за основни текст, почните од практичног водича за читљиву типографију на модерном вебу.

Правилно ускладите дебљине. Ако ваш CSS тражи font-weight: 500, а ви дефинишете само 400 и 700, браузер може синтетисати међудебљину. То није увек страшно, али може изгледати недоследно.

Корак 5: Уклоните спољне Google Fonts позиве

Након додавања локалног CSS-а за фонтове, уклоните старе удаљене позиве из шаблона.

Потражите:

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

Проверите и:

• Подешавања теме у CMS платформама
• Типографске панеле у page-builder алатима
• Видџете трећих страна
• Tag managers
• Старе CSS imports као што је @import url('https://fonts.googleapis.com/...')

Ово последње је често. CSS @import за фонтове обично је гори за перформансе јер одлаже откривање. Ако самостално хостујете, дефинишите фонтове директно у главном CSS-у или у CSS фајлу за фонтове који се учитава рано.

Рад на приватности често не успе зато што тимови поправе очигледан шаблон, али пропусте скрипте, видџете и застареле embed-ове. Исти образац се појављује и у раду на пристанку; наш водич о томе шта се променило за колачиће у 2026 користан је пратилац ако шире смањујете површину трећих страна.

Корак 6: Подесите cache headers

Фајлови фонтова су статички assets. Треба их агресивно кеширати ако су им називи фајлова верзионисани или content-hashed.

Добар production header је:

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

Дуготрајно immutable кеширање користите само ако се URL мења када се фајл промени. На пример:

inter-latin-400.a8f3c2.woff2

или верзионисана путања:

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

Ако препишете /fonts/inter-latin-400.woff2 без промене URL-а, неки корисници могу дуго задржати стари фајл. То је у реду све док није. Верзионисање избегава проблем.

Такође испоручујте фонтове са исправним MIME type:

Content-Type: font/woff2

Већина модерних hosting платформи ово решава аутоматски, али вреди проверити.

Корак 7: Размотрите preload само за критични фонт

Preloading може помоћи браузеру да раније открије важан фонт:

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

Користите ово штедљиво. Preload-ујте примарни фонт за текст изнад прелома, не сваку дебљину фонта. Претерани preload се такмичи са CSS-ом, сликама и JavaScript-ом.

Чак и за фонтове са истог origin-а, укључите crossorigin на font preloads. Fetch фонтова користи CORS mode, а изостављање може изазвати дупла преузимања у неким подешавањима.

Ако нисте сигурни, тестирајте. Немојте cargo-cult-овати preloads зато што је тако рекла нека checklist.

Корак 8: Тестирајте приватност и перформансе

Тестирање је једноставно.

Отворите DevTools, поново учитајте страницу са онемогућеним cache-ом и филтрирајте Network panel за:

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

Требало би да видите фајлове фонтова испоручене са сопственог домена и без захтева ка Google Fonts.

Затим тестирајте са хладним cache-ом и топлим cache-ом. При првој посети, фонтови треба да се преузму једном. При каснијим посетама, треба да долазе из memory или disk cache-а, у зависности од браузера.

Проверите да ли долази до померања распореда када се фонт замени. Ако наслови скачу, метрике резервног фонта се превише разликују од веб фонта. Видљиво померање можете смањити избором ближег резервног фонта или коришћењем новијих CSS font metric overrides као што су size-adjust, ascent-override, descent-override и line-gap-override. Ово је напредније, али корисно за углађене интерфејсе.

На крају, тестирајте странице у private browsing режиму или са укљученим content blockers. Једна предност самосталног хостовања је то што је мање вероватно да ће алати за приватност случајно блокирати вашу типографију.

Уобичајене грешке које треба избегавати

Хостовање превише дебљина

Ово је најчешћи неуспех. Две дебљине су често довољне. Три су обично сасвим довољне. Пет је знак проблема у design-system-у, осим ако имате јак разлог.

Заборављање курзива

Ако ваш садржај користи право истицање, учитајте прави italic фајл. Синтетички курзив може изгледати лоше, нарочито у дугачком уредничком садржају.

Задржавање старог Google CSS линка

То поништава сврху. После миграције, ниједан захтев за фонт не треба да иде ка Google-у, осим ако га не убацује нека друга компонента.

Испоручивање фонтова без дугорочног кеширања

Самостално хостовање вам даје контролу. Искористите је. Фонтови су идеални кандидати за дуг век cache-а.

Игнорисање правног и документационог рада

Ако је ваша политика приватности раније помињала Google Fonts или учитавање фонтова од трећих страна, ажурирајте је после миграције. Ако одржавате инвентар обраде података, ажурирајте и њега. Техничка промена и compliance евиденција треба да се слажу.

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

💡 Испробајте ово: Конвертујте TTF датотеке које сте преузели са Google Fonts у WOFF2 за самостално хостовање плус CSS помоћу Webfont Generator.

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

Једноставна checklist за миграцију

1. Наведите породице фонтова, дебљине, стилове и писма које заиста користите.
2. Преузмите WOFF2 фајлове и потврдите лиценцу.
3. Сузите фонтове ако сајт има ограничене језичке потребе.
4. Додајте локална @font-face правила са font-display: swap.
5. Уклоните све Google Fonts link, preconnect и @import референце.
6. Испоручујте фонтове са сопственог домена са дуготрајним cache headers.
7. Preload-ујте само најважнији фонт изнад прелома, ако тестирање то подржи.
8. Проверите у DevTools да више нема Google Fonts захтева.
9. Ажурирајте документацију о приватности ако је потребно.

Самостално хостовање фонтова није гламурозан посао. То је врста малог инфраструктурног чишћења која смањује ризик зависности, побољшава позицију приватности и даје вам предвидљивије рендеровање. То је обично вредно сат или два колико траје.