@TechUI/Fonts Planning Preview

TechUI Fonts is a resource package in the TechUI ecosystem built specifically for typographic aesthetics.

In Web development, fonts are often invisible performance killers. The core mission of @techui/fonts is to find the perfect balance between "extreme visual presentation" and "strict loading performance". It aims to allow developers to introduce high-quality open-source fonts as easily as building blocks through intelligent bundling strategies.

🚧 Status Description

Current Library Status: Planning & Development (Coming Soon) This library has not yet been officially published to NPM. The following documentation describes its design goals and architectural ideas, aiming to showcase TechUI's future vision for font processing. Stay tuned!

Design Philosophy

Addressing the huge differences between Chinese and English language systems, we adopt two distinctly different loading strategies to ensure optimal resource utilization.

🇺🇸 English Fonts: Bundled Strategy

English font files are usually small (single weight approx. 20kb - 50kb), so we tend to provide stylized collections.

• Whole/Group Import: You can import a complete set of "Sci-Fi Digital Font Family" or "Modern Sans-Serif Font Family" at once.
• Applicable Scenarios: Digital jumping numbers in Scifi component library, English titles for large screens, decorative characters.

🇨🇳 Chinese Fonts: On-Demand Strategy

Chinese character sets contain tens of thousands of characters and are massive in volume (usually between 3MB - 10MB). To prevent page load blocking, we adopt a Single Import strategy.

• Atomized Encapsulation: Each Chinese font (even each weight) is an independent export module.
• Open Source & Free: We only include open-source Chinese fonts confirmed to be free for commercial use (such as Source Han Sans, LXGW WenKai, OPPO Sans, etc.), eliminating copyright worries.

Tree-shaking and Performance

This is the core technical feature of @techui/fonts.

Traditional font import methods often require hardcoding @font-face links in CSS, easily leading to browsers requesting fonts even if they are unused. TechUI Fonts is built based on ES Modules:

• Build Exclusion: Any font you do not import in the code will be completely Tree-shaken away during the Vite/Webpack bundling process.
• Zero Redundancy: Your final build product will only contain the font files you actually use, never occupying an extra 1KB of bandwidth.

Proposed Usage

Note: The following APIs are design previews; the official version may be adjusted.

Independent Installation

Since fonts are "heavy assets" and involve subjective aesthetics, they will not be automatically installed as default dependencies for Admin or Prime. You need to add them manually based on project needs:

npm install @techui/fonts

Import English Font Group

// Import TechUI exclusive sci-fi digital font group (includes regular, bold, mono, etc.)
// These fonts are usually small and suitable for batch import
import "@techui/fonts/english/scifi-numbers";

Import Single Chinese Font

// Only import the Regular weight of "LXGW WenKai"
// Only this specific font file will be bundled
import "@techui/fonts/chinese/lxgw-wenkai-regular";

// Or import the Bold version of "Source Han Sans" for titles
import "@techui/fonts/chinese/source-han-sans-bold";

Use in Styles

After import, the library automatically injects defined CSS variables or class names:

.my-title {
  /* Use predefined font family variable */
  font-family: var(--tui-font-scifi); 
}

.my-content {
  font-family: 'LXGW WenKai', sans-serif;
}

Why is this library needed?

In TechUI's "Trinity" architecture, fonts are the bridge connecting Base, Scifi, and Admin:

• For Prime/Scifi: Sci-fi large screens need special OCR fonts and dot matrix fonts to set the atmosphere, but finding compliant and small-sized resources is very difficult. @techui/fonts will solve this pain point.
• For Admin: Although system default fonts are good enough, some backends with strong branding needs still require special Chinese title fonts to enhance texture.