Machine learning cuts font loading time for large web typography
MLFont: Machine Learning-Driven Font Subsetting and Range-Compact Unicode-Range Slicing for Low-Latency Web Typography
Machine Learning
Summary
Loading fonts on websites can be slow, especially for complex languages like Chinese or Korean, because the font files are very large. The authors created MLFont, a system that uses machine learning to break fonts into smaller, smarter pieces based on which characters appear most often and which appear together. This method helps reduce how much font data a browser must download, speeding up page load times while still showing all needed characters. Tests on popular fonts show significant improvements over previous methods.
What this means in practice
- •For web developers: Enable faster font loading on multilingual websites by using MLFont's learned font slicing that reduces latency and bandwidth.
- •For content delivery network operators: Improve font delivery efficiency by integrating MLFont slicing strategies to reduce data transfer and HTTP round trips for global audiences.
Authors
Quan Wang, Yiran Mao
Abstract
CSS3 @font-face rules with unicode-range descriptors partition web fonts into downloadable slices. While Latin fonts need ~20 KB in WOFF2, Pan-European (LGC) and East Asian (CJK) fonts contain 2,297-30,759 codepoints (158 KB-5.9 MB in WOFF2), where heuristic partitioning causes unused-glyph downloads, high HTTP RTT, CSS bloat, or missing-glyph fallbacks. We present MLFont, a machine learning and optimization framework that learns font slicing strategies from corpora via three stages: (1) a Zipfian High-Frequency Tier (most) isolating top-frequency codepoints; (2) a Latent Co-Occurrence Topic Tier using Online Variational Bayes LDA (Online LDA) or a Deep Neural Network Topic Model (DNNTM) with Shannon Entropy Difference Loss and Sinkhorn-Knopp normalization; and (3) a Memetic Range-Compact Genetic Algorithm (GA) with Potts-Viterbi dynamic programming and island bridging that minimizes topic discrepancy and CSS fragmentation. Across five Google Noto fonts (LGC, KR, JP, TC, SC), MLFont cuts 3G per-glyph latency by 56.7%-75.3% over single-file delivery and 46.1%-66.3% over equal-bin baselines on CJK with 100% coverage, reduces CSS intervals by 17.9%-41.7%, and achieves 1.56x-6.09x cold-cache speedups (65.4%-84.9% CJK and 44.7% LGC bandwidth savings) across 20 websites in simulator and Headless Chrome benchmarks (45/45 exact slice-set parity). Code: https://github.com/wq2012/mlfont Models: https://huggingface.co/collections/wq2012/mlfont