Веб фонтови су и даље најлакши добитак за перформансе на већини сајтова

Образац који се стално понавља

Ако данас прегледате десет насумичних продукционих веб-сајтова, на већини ћете наћи приближно исто стање са фонтовима:

• Шест до десет датотека фонтова учитаних на почетној страници
• Све су у WOFF2 формату (добро), али без font-display стратегије (лоше)
• Неколико тежина и стилова који се нигде на страници не користе
• Цео стек се испоручује са домена треће стране (обично Google Fonts), са свим DNS, TLS и трошковима приватности које то носи
• Нема unicode-range подскупова, па сваки посетилац преузима ћириличне и грчке глифове чак и ако је страница на енглеском

Ово није проблем својствен само малим сајтовима. Много добро финансираних маркетиншких страница и даље учитава 600 KB фонтова пре него што први пасус може да се исцрта. Када једном почнете да примећујете образац, више не можете да га не видите.

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

Користите један варијабилни фонт уместо шест статичких

Ако учитавате Inter Regular, Inter Medium, Inter SemiBold, Inter Bold и њихове italic варијанте, преузимате отприлике шест пута више бајтова него што је потребно. Један Inter варијабилни фонт покрива целу осу тежине (и нагиб, у неким верзијама) у једној датотеци која је једва већа од две статичке тежине.

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

Практично правило: једна датотека варијабилног фонта по писму, по породици. Латиница у једној датотеци, ћирилица у другој, грчко писмо у трећој, учитано условно помоћу unicode-range. То је све.

Подесите разумно font-display

Подразумевано понашање док се прилагођени фонт још учитава јесте да се не прикаже ништа — невидљив текст — до три секунде. То је најгора могућа подразумевана вредност. Корисници виде празну страницу и претпостављају да нешто не ради.

Додајте ово у свако @font-face правило:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

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

Ускладите метрике резервног фонта

Бљесак нестилизованог текста делује непријатно само када резервни и прилагођени фонт имају веома различите метрике. Савремени CSS то решава помоћу size-adjust, ascent-override и сродних својстава:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Када су метрике резервног фонта подешене, замена је једва приметна — речи заузимају исти хоризонтални простор пре и после учитавања прилагођеног фонта.

Рад компаније Google на --allow-fallback-font-metrics сада је део основне подршке у прегледачима, а постоји и алатни pipeline (библиотека fontaine и слични алати) који за неколико секунди израчунава праве вредности за вас.

Хостујте сами

Google Fonts је згодан, бесплатан и доноси два стварна трошка:

1. Друго TLS руковање. Чак и уз HTTP/3 и спајање конекција, додатни origin ретко је бесплатан.
2. Питање приватности и усклађености. Неколико европских судова пресудило је да учитавање Google Fonts са fonts.gstatic.com представља пренос личних података (IP адресе) трећој страни. Самостално хостовање у потпуности уклања то питање.

Pipeline за преузимање и хостовање је:

1. Набавите WOFF2 датотеку (варијабилну верзију ако постоји)
2. Сведите је на подскуп писама која ваша публика заиста користи
3. Испоручујте је са истог origin као и остатак сајта, уз дугачак Cache-Control: max-age=31536000, immutable
4. Унапред учитајте најкритичнију тежину: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

То је цео pipeline. За постојећи сајт потребно је једно поподне, и готово никада се не враћате назад.

Када у потпуности прескочити прилагођене фонтове

Вреди рећи наглас: није сваком сајту потребан прилагођени фонт. Системски стек фонтова сада је заиста леп на сваком оперативном систему:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Тежина је исправна, метрике су исправне, рендеровање је подешено за уређај, а трошак у бајтовима преко мреже износи тачно нула. За сајт са алатима, интерну апликацију, портфолио који даје предност садржају или било шта намењено корисницима на спорим мрежама, системски стек је исправан одговор.

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

💡 Пробајте ово: Конвертујте своје TTF или OTF датотеке у модерни WOFF2 са CSS-ом спремним за употребу помоћу Webfont Generator, што је промена формата коју објава препоручује.

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

Искрен резиме

За типичан мали сајт, четири корака покривају целу причу о перформансама веб фонтова:

1. Један варијабилни фонт по породици и по писму
2. font-display: swap са усклађеним метрикама резервног фонта
3. Самостално хостовано са дугим cache заглављима и preload за критичну тежину
4. Или у потпуности прескочите фонтове и користите системски стек

Урадите ово једном и вратићете неколико стотина килобајта са почетне странице, добити неколико стотина милисекунди перципираних перформанси и успут уклонити зависност од треће стране. Мало која промена има бољи однос уложеног труда и добитка.