TypeScript icon, indicating that this package has built-in type declarations

2.2.1 • Public • Published

Vite font extractor plugin

vite-font-extractor-plugin is a vite plugin that to extracted glyphs from fonts that are used in applications and change the original font files to minimize.

[!IMPORTANT] The main goal of this plugin is a minimize fonts and save easy use way on the page and in frameworks.


To install vite-font-extractor-plugin use npm:

npm install vite-font-extractor-plugin


  • Save ligatures
  • Auto detect font ligatures by css content: "."
  • Support goggle font urls
  • Support zero config


[!WARNING] When using the auto type, the system identifies only CSS properties with content: "." and attempts to extract all font ligatures from each font file. Furthermore, in every build, the system recalculates a hash on font files since the plugin cannot detect changes when dependent on Unicode.

It is strongly recommended to use the manual type if these limitations are critical for your project


Config file by zero config:

// vite.config.js
import FontExtractor from "vite-font-extractor-plugin";

export default defineConfig({
 plugins: [
  FontExtractor() // by default use "auto" type

Config file by auto config:

// vite.config.js
import FontExtractor from "vite-font-extractor-plugin";

export default defineConfig({
 plugins: [
  FontExtractor({ type: 'auto', targets: [] }) // 'targets' is not required and can be undefined

Config file by manual type behavior:

// vite.config.js
import FontExtractor from "vite-font-extractor-plugin";

const MaterialIconRegularTarget = {
 fontName: 'Material Icons',
 ligatures: ['abc, close'],

export default defineConfig({
 plugins: [
  FontExtractor({ type: 'manual', targets: MaterialIconRegularTarget}), // 'targets' is required

Through JS import:

// main.js
import Vue from 'vue';
import App from './App.vue';
import Vuetify from "vuetify";
// First way to import fonts
import 'material-design-icons-iconfont/dist/material-design-icons-no-codepoints.css';


export function createApp() {
 const app = new Vue({
  vuetify: new Vuetify({
   icons: {
    iconfont: 'md',
  render: (h) => h(App),

 return {app};


Through CSS import:

// App.scss
// Second way to import font
@import "material-design-icons-iconfont/dist/material-design-icons-no-codepoints.css";

Through CSS file:

// material-design-icons-iconfont/dist/material-design-icons-no-codepoints.css
@charset "UTF-8";
@font-face {
  // See font name here
  font-family: 'Material Icons';
  src: url("./fonts/MaterialIcons-Regular.eot");
  src: url("./fonts/MaterialIcons-Regular.woff2") format("woff2"),
  url("./fonts/MaterialIcons-Regular.woff") format("woff"),
  url("./fonts/MaterialIcons-Regular.ttf") format("truetype");

.material-icons {

Google fonts urls

Plugin additionally supports Google font url transformation to enable minification:

Config file

// vite.config.js
import FontExtractor from "vite-font-extractor-plugin";

const MaterialIconGoogleFontTarget = {
 // Warning: "+" sign from url should be transformed to plain space sign
 fontName: 'Material Icons', // 'Material+Icons' is wrong notation
 ligatures: ['play_arrow', 'close'],

export default defineConfig({
 plugins: [
  FontExtractor({targets: MaterialIconGoogleFontTarget}),

CSS file

/* Import throw css import */
@import "";

HTML file

<!doctype html>
<html lang="en">
    <meta charset="UTF-8"/>
    <!-- Import throw html link tag -->
    <link href=""
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>


FontExtractor(pluginOption: PluginOption): Plugin

PluginOption parameters:

  • type "auto" | "manual": Type plugin behaviour.
  • targets Target[] | Target | undefined: Targets for font extracting.
  • cache boolean | string | undefined: Enable a minifying result cache.
  • logLevel LogLevel | undefined: Setup a log level for plugin options. By default get a vite config logLevel.
  • apply "build" | "serve" | undefined: Apply the plugin only for serve or build, or on certain conditions
  • ignore string[] | undefined: Font names what will be ignored by plugin processing

Target parameters:

  • fontName string: The font filename that is to be extracted.
  • ligatures string[] | undefined: An array of ligatures to extracted from the font.
  • raws string[] | undefined: An array of unicode and symbols that will found and extracted from the font.
  • withWhitespace boolean | undefined: Set to true if you want to include whitespace glyphs in the font.


  • Plugin: plugin model for vite.


vite-font-extractor-plugin is released under the MIT License. See the LICENSE file for details.


Contributions are welcome! If you find a bug or want to add a new feature, please open an issue or submit a pull request.

Package Sidebar


npm i vite-font-extractor-plugin

Weekly Downloads






Unpacked Size

58.3 kB

Total Files


Last publish


  • deathsmell