Embedding Fonts on the Web: @font-face, CDNs and Subsetting
Putting free commercial fonts on a website means juggling licence scope - not every free-commercial grant allows web embedding - and performance, since CJK fonts run to tens of megabytes. This covers licensing checks, Google Fonts embedding, subsetting, fallback stacks and performance.
1. Licence first: what may go on your site
Serving a file through @font-face is network distribution, with stricter demands than print. Safe zone: OFL and Apache fonts embed and redistribute freely - Source Han, LXGW WenKai, Inter, Roboto, plus the ZCOOL series (attach the licence text). Caution zone: among corporate declarations, PuHuiTi, HarmonyOS Sans and MiSans allow web or platform embedding in their own portals - re-verify the current policy line by line; UISDC Biaoti Hei and Pangmen Title forbid embedding outright, a clause people miss most. Absolute no-go: any personal-only font on a public page. The laziest correct route: the official Google Fonts subset (the 'web font' field on our detail pages) - Google maintains licence, CDN, subsetting and updates.
2. Google Fonts in practice
The standard is two <link rel=preconnect> tags for fonts.googleapis.com and fonts.gstatic.com, then the css2 URL with your weights and display=swap. On CJK pick the regional variant: Noto Sans SC/TC/JP/KR follow different glyph conventions; LXGW WenKai ships the TC cut - assess before using it as mainland body text. If your audience sits in mainland China, test carefully: Google domains may fail to resolve, so the robust pattern is self-hosting a subsetted woff2 (next section) or a hybrid stack of system CJK plus web Latin.
3. Self-hosting CJK: the subsetting playbook
The full Simplified Han Sans weighs 90 MB+ - direct hosting is suicide. Plan A: a fixed subset per copy (pyftsubset or online tools) for campaign pages and brand sites, down to 50-300 KB. Plan B: sharding - split the charset into unicode-range woff2 slices that browsers request on demand (exactly what Google Fonts does), right for UGC platforms. Plan C: skip CJK web fonts and drive system faces through the stack (this site's specimens do), zero bandwidth. Self-hosting is still licence-bound: OFL wants its text shipped with the files, and some corporate grants cover installation but not network serving - follow the official clause.
4. Stacks and performance
A good stack pattern: custom Latin → platform CJK → generic. Example: Inter, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif - putting free-commercial, widely installed faces like MiSans in the stack saves bandwidth and raises consistency. Performance trio: font-display: swap against invisible text, woff2 plus preload for the critical subset, variable files instead of weight lists. Verify with the Network waterfall and Lighthouse: swap's reflow can raise CLS - on layout-critical components, tune with size-adjust or metric-matched fallbacks.
This site is an index of publicly available information. It does not host, mirror or distribute any font file and does not warrant any licence. Rights holders may change terms, split free and paid editions, or withdraw a permission at any time. Before commercial use, verify the licence on the official page and keep a dated screenshot as evidence. For trademarks, overseas publication and large-scale embedding, consult an IP professional.