Interface Lab
Login
Back to knowledge
Resource Licensing

Webfont License and Loading Governance

Font intake is not only visual choice; it must confirm per-font licensing, delivery method, privacy constraints, CJK size, fallback, and loading performance together.

fontslicenseperformanceprivacy

Design Principle

A font is both a brand asset and a runtime dependency. Agents should recommend a font only when its license is traceable, loading surface is controlled, fallback is stable, and privacy boundary is clear.

Large Theory

Webfont decisions span visual design, licensing, privacy, performance, and internationalization. Google Fonts, Fontsource, Bunny Fonts, and self-hosted WOFF2 can all be valid, but for different reasons: Google Fonts is discovery and ecosystem entry, Fontsource supports npm version locking and self-hosting, Bunny Fonts fits CDN-allowed privacy/GDPR-oriented contexts, and self-hosting fits strict compliance, offline, and controllable performance budgets.

Small Points

  1. Confirm licensing by font family or package, not by platform name; record license name, license URL, commercial-use status, attribution, and redistribution boundary.
  2. Ask delivery constraints first: are third-party requests allowed, is offline/intranet required, is version locking needed, and are privacy/GDPR requirements present?
  3. Prefer WOFF2, variable fonts, and necessary subsets; do not load many weights, italics, and a full CJK character set for one UI.
  4. font-display, preload, and local fallback work together: preload only critical first-viewport faces, not every font.
  5. Split fallback by script: Latin, CJK, mono, and emoji width, line-height, and punctuation affect buttons, tables, and navigation.
  6. Preserve license files or source records when font files enter the repository or CDN so they remain traceable later.

Design Judgment

A healthy font plan answers six questions: what the font is, where it came from, what its license is, how it loads, what happens when it fails, and what performance/privacy impact it has. If it cannot answer them, it stays a candidate rather than production implementation.

Implementation Notes

Create a font matrix for each font role: role, family, source, license, weights/styles, scripts, delivery, fallback, file size, preload, font-display, and QA notes. In Next.js, prefer next/font or local WOFF2. Use Fontsource when npm reproducibility matters. Use Bunny Fonts or similar services only when the product allows external font CDNs. For CJK, prefer system fallback or precise subsetting instead of shipping a full multi-weight family in the first viewport.

Counterexamples/Risks

Treating Google Fonts or Fontsource platform terms as every font license, copying external CSS that creates third-party requests, loading a full multi-weight Noto CJK family for a bilingual UI, missing fallback that changes button height, and testing only desktop English mockups while ignoring Chinese and 200% zoom.

Case Study

Fontsource documents self-hosting, version locking, privacy, offline use, and additional font coverage as benefits, while its repository also reminds users to read each font license. Bunny Fonts positions itself as open source, privacy-first, no-tracking, and compatible with Google Fonts CSS v1, while its FAQ still points users to each family license. The reusable lesson is that a delivery platform solves the engineering path; it does not replace per-font licensing and performance governance.

Source Links

Fontsource introduction: https://fontsource.org/docs/getting-started/introduction Fontsource repository: https://github.com/fontsource/fontsource Bunny Fonts about: https://fonts.bunny.net/about Bunny Fonts FAQ: https://fonts.bunny.net/faq Google Fonts licensing: https://fonts.google.com/knowledge/glossary/licensing

Agent Directive

Before recommending or integrating webfonts, output font license record, delivery method, fallback stack, CJK/multilingual size control, and privacy/third-party request judgment; do not integrate automatically when any part is missing.