Punguza kazi ya fonti kila njia inayoomba kwa kivinjari
Fanya orodha ya maombi ya fonti ya cache baridi kwenye ukurasa wa nyumbani, kurasa za uongozaji (conversion), muonekano wa watumiaji waliingia (logged-in), na templates zilizo na mifumo tofauti ya muundo. Changanua familia, uzito, mtindo, faili, asili (origin), ukubwa wa uhamisho, na selector. Kanuni iliyotangazwa ya @font-face haitoi download yenyewe; kivinjari kwa kawaida hupakua face wakati mpangilio wa sasa unaitumia. Hii inafanya uzito na mitindo isiyotumika kuwa wa kwanza kuondolewa.
Tumia aina maalum (custom type) pale inapotuletea thamani halisi ya chapa, mara nyingi kwenye vichwa vya maonyesho (display headings), na fikiria kutumia stack ya mfumo (system stack) kwa mwili wa nakala (body copy) wakati muundo unaruhusu. Usidhani variable font daima ndogo: inaweza kuchukua nafasi ya faili kadhaa za static lakini inaweza kuwa kubwa kuliko uso mmoja wa static. Linganisha mali zilizobanwa (compressed assets) zinazohitajika kwenye njia husika.
Ondoa familia, uzito, italiki, na fonti za icon zisizo na matumizi yaliyopimwa kwenye ngazi ya route.
Angalia kwamba leseni inaruhusu utoaji wa wavuti, subsetting, na kujihost kabla ya kubadilisha build.
Tumia WOFF2 na fanya subsetting bila kuondoa herufi zinazohitajika
Anza na WOFF2 kama msingi kwa vivinjari vya kisasa. W3C Recommendation inaelezea WOFF2 kama kifurushi cha fonti za wavuti kilichobuniwa kwa kubana vizuri na utegenezaji wa haraka wa decompress, na imewekwa katika vivinjari vikuu. Hifadhi muundo mwingine tu kwa mahitaji yaliyoelezewa ya kivinjari cha zamani; vinginevyo fallback iliyoundwa vizuri ndiyo njia salama ya ulinganifu.
Subsetting huunda faili ndogo yenye glyphs zilizochaguliwa, au sura za herufi. unicode-range inaweza kuhusisha subsets na safu za herufi ili kivinjari kichague faili inayofaa wakati wa kuoanisha maandishi. Tengeneza subsets kutoka kwa kurasa halisi na lugha unazounga mkono, ikijumuisha alama za uandikaji, sarafu, majina, maandishi ya kisheria, na script zinazowekwa na watumiaji. Glyphs zinazokosekana ni tatizo la usahihi, sio kuokoa biti inayokubaliwa.
Jaribu kurasa za mfano za eneo (localized) na pembejeo za fom, sio sampuli za muundo za Kiingereza pekee.
Hakikisha unicode-range ya kila subset na safu ya uzito/mtindo inalingana na faili iliyoinuliwa.
Panga fallback na sera ya font-display pamoja
Fonti ya fallback ni ile watumiaji wanaoiona wakati face maalum haijapatikana. Ichague kwa ulinganifu wa vipimo, kisha linganisha vichwa halisi, vitufe vilivyomo mstari mwingi, urambazaji, meza, fomu, na mistari mirefu ya maandishi yaliyolocalize. Upana tofauti hubadilisha wrapping; ascent, descent, au line gap tofauti hubadilisha urefu wa bloku. Vyote vinaweza kusukuma yaliyomo tayari kuonekana kwenye ukurasa.
font-display inaelezea tabia ya uundaji wakati face haipo tayari. Optional ina kipindi kidogo sana cha block na haina kipindi cha swap, hivyo inaweza kufaa kwa body text ambapo fallback thabiti inapendelewa kwenye ziara ya kwanza. Swap inaonyesha fallback mara moja na inaweza baadaye kutumia web font, lakini itumike tu pale ambapo uingizwaji wa baadaye hautasababisha reflow ya kukasirisha. Block au fallback inapaswa kuwa na sababu ya muundo iliyojaribiwa, sio chaguo linaloendeleza kwa kimataifa. CSS size-adjust inaweza kusaidia kurekebisha vigezo vya fallback, lakini thibitisha kila script na viewport inayoungwa mkono kwa kuona kwa macho.
Usifanye maandishi ya malipo, urejeshaji, akaunti, usalama, au urambazaji utegemee fonti maalum inayochelewa.
Barua kwa fallback inaweza kuwasilisha maana isiyo sahihi; SVG icons kwa kawaida ni salama zaidi kwa alama za ki-interfasi.
Boresha kugundua (discovery), lakini udhibiti preload na tathmini mtiririko wa data
Face iliyotangazwa tu katika stylesheet ya nje inaweza kugunduliwa baada ya stylesheet hiyo kupakuliwa na kuchambuliwa. CSS muhimu ya mapangilio inayoweza kudumishwa inaweza kuonyesha tamko muhimu mapema; usiweke binary ya fonti ndani ya HTML, kwani inakuza ukubwa wa hati. Kwa asili ya mtu wa tatu (third-party origin), preconnect inaweza kuanzisha muunganisho mapema. Maombi ya fonti ni rasilimali za CORS, hivyo utoaji wa kawaida wa preloads na cross-origin unahitaji usimamizi sahihi wa crossorigin.
Preload ni msukumo wa kipaumbele, sio swichi ya mwendo wa kasi kwa kila mahitaji. Inaweza kushindana na kazi muhimu nyingine na inaweza kupakua face ambayo njia haijaihitaji; pia huikwepa unicode-range selection. Rekebisha ugunduzi wa kuchelewa kwanza, kisha preload angalau faili moja iliyo thibitishwa kwa ziara ya kwanza kwa URL kamili, as=font, na crossorigin. Google Fonts inasema maombi ya API yanajumuisha anwani ya IP ya msafiri, URL iliyohitajika, vichwa vya HTTP, na referer; pia inasema API yake haiseti wala haiandiki cookies na haileti taarifa zilizo kukusanywa kwa ajili ya ufuatiliaji wa wasilisho au matangazo. Kujihost hukomesha Google kupokea data kwa upakuaji huo. Tathmini utoaji, taarifa za faragha, mamlaka, mkataba, na ushauri uliothibitishwa inapohitajika.
Linganisha fundisho za cache baridi na thibitisha kuwa faili iliyo preloaded inatumiwa kwenye route.
Pima utayarishaji wa muunganisho, uwezo wa cache na CDN, matengenezo ya mali, na mtiririko wa data wa msafiri.
Toa toleo la mali za fonti na hifadhi usanidi wa CSS fallback uliothibitishwa.
Jaribu tabia ya uundaji na endesha fonti kama utegemezi wa ustahimilivu
Kwa cache baridi, tumia zana za mtandao za kivinjari kuchunguza mnyororo wa CSS-mpaka-fonti, muda, asili, caching, na kushindwa. Rudia kwenye muunganisho uliokandamizwa, kisha zingua au ziba fonti. Mafanikio ni maandishi yanayosomeka, vitufe vinavyotumika, alama sahihi, na mpangilio unaolingana kabla face maalum haijaonekana. Jaribu michoro halisi ya narrow na desktop, mistari mirefu, makosa, nakala ya ridhaa, bei, na script zote zinazoungwa mkono.
Katika Chromium, rekodi upya (reload) katika Performance panel na chunguza Layout Shifts track; DevTools inaweza kutambua vipengele vilivyohamishwa na kusisitiza mabadiliko. Upakiaji wa fonti ni mshukiwa wa kawaida, lakini kipengele kilichosogezwa si lazima kuwa chanzo cha mzizi, kwa hiyo sambaza rekodi na utekelezaji wa fonti. Layout Instability API ni kwa Chromium pekee, ambayo inafanya chaguzi za kuona kwa vivinjari tofauti muhimu. Jumuisha mali za fonti, tabia ya CORS, sera ya cache, fallbacks, na njia za kurudisha nyuma (rollback) katika mapitio ya uzinduzi. Mode iliyokusudiwa ya kupunguza kasi (degraded mode) ni maandishi yanayosomeka, si yaliyofichwa au urambazaji uliovunjika.
Cache ya moto inaweza kuficha ombi la awali na tatizo la uundaji.
Rudia ukaguzi wakati faili, nakala za CMS, templates, watoa huduma, au sheria za CDN zinapobadilika.