Verminder het fontwerk dat elke route de browser laat doen
Maak een inventaris van cold-cache fontaanvragen op de startpagina, conversiepagina’s, ingelogde weergaven en templates met verschillende designsystemen. Noteer family, gewicht, stijl, bestand, oorsprong, overdrachtsgrootte en selector. Een verklaarde @font-face-regel triggert op zichzelf niet noodzakelijkerwijs een download; een browser haalt normaal een face wanneer de huidige layout deze gebruikt. Dat maakt ongebruikte globale gewichten en stijlen de eerste kandidaten om te verwijderen.
Gebruik custom lettertype waar het echt merkwaarde toevoegt, vaak in display-koppen, en overweeg een system stack voor gewone body-tekst wanneer het ontwerp dat toelaat. Ga er niet van uit dat een variable font altijd kleiner is: het kan meerdere statische bestanden vervangen maar groter zijn dan één statische face. Vergelijk de gecomprimeerde assets die daadwerkelijk door de route worden opgevraagd.
Verwijder families, gewichten, cursieven en icon-fonts die geen geteste route-niveau toepassing hebben.
Controleer dat de licentie weblevering, subsetting en self-hosting toestaat voordat je de build wijzigt.
Gebruik WOFF2 en subset zonder benodigde tekens te verwijderen
Begin met WOFF2 voor een moderne-browser baseline. De W3C Recommendation beschrijft WOFF2 als een web-fontpakket dat ontworpen is voor verbeterde compressie en snelle decompressie, en het is geïmplementeerd in grote browsers. Houd een ander formaat alleen voor een gedocumenteerde legacy-browservereiste; anders is een goed ontworpen fallback de veiligere compatibiliteitroute.
Subsetting creëert een kleiner bestand met geselecteerde glyphs of tekenvormen. unicode-range kan subsets koppelen aan tekenreeksen zodat de browser een relevant bestand kiest bij het matchen van tekst. Bouw subsets op basis van echte pagina’s en de talen die je ondersteunt, inclusief interpunctie, valuta's, namen, juridisch tekstwerk en door gebruikers ingevoerde scripts. Ontbrekende glyphs zijn een correctheidsprobleem, niet een acceptabele byte-besparing.
Test representatieve gelokaliseerde pagina’s en formulierinvoer, niet alleen Engelse ontwerpsamples.
Zorg dat elke subset’s unicode-range en gewicht/stijl-bereik overeenkomt met het uitgerolde bestand.
Ontwerp de fallback en font-display beleid samen
Een fallbackfont is wat gebruikers zien wanneer het custom face nog niet klaar is. Kies het op vergelijkbare proporties, en vergelijk daarna echte koppen, meerregelige knoppen, navigatie, tabellen, formulieren en lange gelokaliseerde strings. Verschillende breedtes veranderen wrappen; verschillende ascent, descent of line-gap veranderen blokhoogte. Beide kunnen zichtbare inhoud verplaatsen die al op de pagina staat.
font-display bepaalt het rendergedrag terwijl een face onbeschikbaar is. optional heeft een extreem korte block-periode en geen swap-periode, dus het kan geschikt zijn voor bodytekst wanneer een stabiele fallback bij het eerste bezoek de voorkeur heeft. swap toont snel fallback en kan later het webfont toepassen, maar gebruik het alleen waar een late vervanging geen storende reflow veroorzaakt. Block of fallback moet een geteste ontwerprede zijn, geen globale standaard. CSS size-adjust kan helpen de metrics van een fallback bij te stellen, maar verifieer visueel elk ondersteund script en viewport.
Maak betalings-, herstel-, account-, veiligheids- of navigatietekst niet afhankelijk van een laat custom font.
Een fallbackletter kan de verkeerde betekenis overbrengen; SVG-iconen zijn doorgaans veiliger voor interface-symbolen.
Verbeter ontdekking, maar beperk preload en beoordeel datastromen
Een face die alleen in een externe stylesheet is gedeclareerd kan pas ontdekt worden nadat die stylesheet is gedownload en geparseerd. Onderhoudbare vroege kritieke CSS kan een noodzakelijke declaratie eerder blootleggen; inline het font-binary niet, dat vergroot het document. Voor een derdepartij-oorsprong kan preconnect de verbinding eerder tot stand brengen. Fontaanvragen zijn CORS-resources, dus cross-origin levering en preloads vereisen correcte crossorigin-afhandeling.
Preload is een prioriteitsoverride, geen algemene snelheidsknop. Het kan met ander kritisch werk concurreren en kan een face downloaden die een route nooit nodig heeft; het omzeilt ook unicode-range-selectie. Los late ontdekking eerst op, preload dan hooguit één bewezen first-view bestand met de exacte URL, as=font en crossorigin. Google Fonts zegt dat API-aanvragen het IP-adres van de bezoeker, opgevraagde URL, HTTP-headers en referer bevatten; het zegt ook dat zijn API geen cookies zet of logt en de verzamelde informatie niet gebruikt voor profielen of gerichte advertenties. Self-hosting stopt het naar Google sturen van data voor die loads. Evalueer levering, privacyverklaring, jurisdictie, contracten en haal gekwalificeerd advies in waar nodig.
Vergelijk cold-cache traces en bevestig dat het gepreloade bestand op de route wordt gebruikt.
Weeg verbindingstijd, cache- en CDN-capaciteit, asset-maintenance en bezoekersdatastromen af.
Versiebeheer font-assets en behoud een geteste CSS-fallbackconfiguratie.
Test gerenderd gedrag en beheer fonts als een veerkrachtige afhankelijkheid
Bij een cold cache gebruik browsernetwerktabbladen om de CSS-naar-font-aanvraagketen, timing, oorsprong, caching en fouten te inspecteren. Herhaal op een beperkte verbinding, throttle of blokkeer daarna het font. Succes betekent leesbare tekst, bruikbare controls, accurate symbolen en coherente layout vóórdat het custom face verschijnt. Test realistische smalle en desktoplay-outs, lange strings, foutberichten, toestemmingskopie, prijzen en elk ondersteund script.
In Chromium neem een reload op in het Performance panel en inspecteer de Layout Shifts-track; DevTools kan verplaatste elementen identificeren en de verschuiving animeren. Fontloading is een bekende boosdoener, maar een verplaatst element is niet per se de worteloorzaak, dus correleer de trace met het fonttoepassingstijdstip. De Layout Instability API is Chromium-only, wat cross-browser visuele controles belangrijk maakt. Neem fontassets, CORS-gedrag, cachebeleid, fallbacks en rollback mee in release-review. De bedoelde degradeermodus is leesbare tekst, niet blanco inhoud of gebroken navigatie.
Een warme cache kan het initiële verzoek en renderingprobleem verbergen.
Herhaal de controle wanneer bestanden, CMS-tekst, templates, providers of CDN-regels veranderen.