vite-plugin-font weekly downloads statistics

🔠 vite-plugin-font 5.0 ⚡

中文 | English

Developed and supported by the Chinese WebFont Project, vite-plugin-font is a powerful and simple Vite font build tool that can split large fonts into Webfonts. It is powered by cn-font-split for Rust-native level build speed.

We provide an Extremely lightweight optimization solution for first-screen optimization and a full-scale optimization for large text sites, achieving extreme optimization of Chinese fonts in the front-end toolchain.

⚡ Features

1. ⚡ 50% faster speed, no fear of lag 2. ⚙️ Automatic CJK (Chinese, Japanese, Korean) font splitting, extremely fast on-demand loading 3. 🚀 Automatically optimizes the first screen based on characters used in your project 4. 🔄 Automatically converts fonts to woff2 format, no need to worry about size issues 5. 🌐 Automatically adds local adaptation, reduces cumulative content shifts, SSR support 6. 📤 Exports font information, supports tree shaking optimization 7. 🎨 Pure CSS, no runtime data, multi-platform compatibility 8. 📦 Automatically reduces Chinese CLS offset

| Type | Vite, Astro, Qwik | Nuxt | Next | Webpack, Rspack |

| Full-scale optimization | ✅ | ✅ | ✅ | ✅ | | Extremely lightweight optimization | ✅ | ✅ | ✅ | ✅ |

1. Full-scale optimization is suitable for blogs, documentation websites, which require a large amount of uncertain text. It can achieve full-scale font rendering and has excellent cache performance when combined with CDN. 2. Extremely lightweight optimization is suitable for official websites, promotional web pages, etc., where quick rendering is required. It collects the characters used in your code and only loads these characters, providing excellent rendering performance. The required font size is approximately 10% of full-scale optimization.

📦 Install

✨ Config

Vite

Almost all frameworks that use Vite as the underlying compilation framework can use vite-plugin-font by defining plugins.

Nuxt

Next

Webpack

Rsbuild

Thanks to @SamuNatsu for the addition.

TS Type Configuration

🚀 Usage

Extremely Lightweight Optimization

Extremely lightweight optimization is suitable for official websites, promotional web pages, etc., where quick rendering is required. It collects the characters used in your code and only loads these characters, providing excellent rendering performance.

Add scanFiles, the way to add it for Nuxt and Webpack is slightly different, but both are adding scan files to the options.

Add ?subsets to your link

Separate Partition Optimization

Sometimes, we need to package fonts according to different page dimensions, so we can use a key to identify the range of scanFiles.

TypeScript Support

The source code includes the src/font.d.ts file, you can add it to tsconfig.json.

Input Parameters

For input parameters, please refer to the usage instructions of cn-font-split. Most parameters are universal.

Description from the npm listing.