Serving Web Fonts Without Latency - Feat. Safari & Edge functions

Banksalad applies the Pretendard font in its global CSS and uses it across all services, but carried out optimization to resolve the flicker phenomenon caused by font loading delays. By prioritizing loading of the woff2 format and applying the Subset technique to remove unused Glyphs, they reduced the file size by more than 70% compared to the original.

Critical Request Depth(CRD) issue and the Safari problem

Generally, using a preload link to download CSS and fonts in parallel can resolve the CRD issue. However, Safari intentionally does not follow the W3C Recommendation and does not apply CORS for cross-domain font requests, causing an issue where the preloaded request is not reused and the same font is downloaded twice.

Resolution via CloudFront Function

To solve this problem, they introduced a CloudFront Function(CFF) to manipulate request headers. When a font path request lacks an Origin header, the CFF inserts one based on the Host value, converting it into a CORS request. Additionally, at the response stage, they filtered 'Origin' out of the Vary header so that Safari could properly reuse the cache. Through this, they achieved an optimized network waterfall without font loading delays even in Safari.