Google Font Anton字体本地部署与CDN文件大小差异及优化咨询

Great question—this is a super common gotcha when switching from Google Fonts CDN to self-hosting fonts. Let’s break down the size gap first, then dive into practical ways to slim down your local font files.

What’s Causing the Big Size Difference? #

That 14KB file from Google and your 80KB local TTF aren’t the same product at all—here’s the core reasons:

• Subsetting is the main culprit: Google Fonts doesn’t serve the full Anton font. Instead, it automatically delivers a subset that only includes the characters your website actually uses (or a default common Latin subset if it can’t detect your specific usage). The full Anton TTF includes support for dozens of extended Latin characters, symbols, and glyphs you probably don’t need for your site, which bloats the file size to 80KB.
• Optimized web formats: The 14KB file you’re seeing from Google is almost certainly a WOFF2 font, not raw TTF. WOFF2 is a web-specific format with built-in compression that cuts file sizes by 30-50% compared to unoptimized TTF. Google automatically serves the most efficient format each browser supports, so you never get the bulky raw TTF unless you explicitly download it.

How to Reduce Your Local Font File Size #

If you need to self-host Anton instead of relying on Google’s CDN, try these steps to shrink your files down to something closer to that 14KB mark:

• Generate a custom subset: Use a tool like Font Squirrel Webfont Generator to upload your full Anton TTF. In the settings, select only the character sets you actually need (e.g., just Basic Latin for English-only sites). This strips out all unused glyphs, instantly cutting the file size drastically.
• Convert to WOFF2: Even if you keep the full font, converting it to WOFF2 will shrink it significantly. Most web font tools (including the one mentioned above) can generate WOFF2 files alongside other formats. All modern browsers support WOFF2, so it’s the best choice for web delivery.
• Extract only the characters your site uses: For ultra-precise optimization, use a tool like glyphhanger. It scans your website’s HTML and CSS to identify exactly which characters Anton needs to display, then generates a custom font file with only those glyphs. This can get your file size down to just a few KB if your character usage is limited.
• Stick with Google’s CDN (if you can): If you don’t have a hard requirement to self-host, Google’s CDN handles all this optimization automatically. It also leverages global caching, so returning visitors won’t need to re-download the font at all.

内容的提问来源于stack exchange，提问作者hansTheFranz