@gpits/vite-fontsource-variable-discover

About

Vite plugin for discovering installed @fontsource-variable fonts.

This plugin discovers the @fontsource-variable font packages installed by your application and can generate the corresponding font resources during the Vite build/dev workflow.

There following are also available, for more specialised needs:

• The underlying library which can also be used independently as a TypeScript/JavaScript library or CLI when Vite integration is not required.
• A Statamic Custom Dictionary that makes the fonts list available as a field in the Statamic control panel.

This package was developed to support a project of GUNET.

Why?

@fontsource-variable provides a large collection of variable fonts, but some applications still need a way to determine which fonts are installed.

Rather than maintaining a separate list of fonts, this plugin derives that information directly from the application's installed dependencies.

This is particularly useful for Vite applications that need to:

• dynamically discover available fonts;
• generate a font stylesheet;
• expose font metadata to other application code;
• keep font configuration synchronized with package.json.

How it works

1. Reads the application's package.json.
2. Finds dependencies whose names start with @fontsource-variable/ and resolves the installed font packages.
3. Reads each package's metadata.json.
4. Optionally generates a CSS file with the @import statements required for using the fonts.
5. Optionally generates a JSON file with the main metadata of discovered fonts.

Installation

Install the plugin and the discovery library:

npm install @gpits/vite-fontsource-variable-discover

Also install the variable fonts you want to use, e.g.:

npm install @fontsource-variable/inter
npm install @fontsource-variable/roboto-mono

Usage

Add the plugin to your Vite configuration:

import fontsourceVariableDiscover from "@gpits/vite-fontsource-variable-discover";
    plugins: [
        fontsourceVariableDiscover({
            cssPath: "resources/css/fonts.css",
            jsonPath: "resources/json/fonts.json",
        }),
        ...
    ],

Configuration

The plugin accepts the following options:

• includeDevDependencies (boolean): By default, development dependencies are not included. This includes them.
• cssPath: The path where to write the CSS file. If not specified, no CSS file will be emitted.
• jsonPath: The path where to write the JSON file. If not specified, no JSON file will be emitted.

Example

A complete configuration might look like:

import { defineConfig } from "vite";
import fontsourceVariableDiscover from "@gpits/vite-fontsource-variable-discover";
export default defineConfig({
    plugins: [
        fontsourceVariableDiscover({
            cssPath: "resources/css/fonts.css",
            jsonPath: "resources/json/fonts.json",
            includeDevDependencies: true,
        }),
    ],
});

If your application has:

"dependencies": {
    "@fontsource-variable/inter": "5.2.6",
},
"devDependencies": {
    "@fontsource-variable/roboto-mono": "5.2.6"
}

then the plugin will produce a CSS file containing the necessary @import statements:

@import "@fontsource-variable/inter";
@import "@fontsource-variable/roboto-mono";

and a JSON file containing the discovered font metadata:

[
  {
    "key": "inter",
    "name": "Inter",
    "family": "Inter Variable",
    "package": "@fontsource-variable/inter",
    "category": "sans-serif"
  },
  {
    "key": "roboto-mono",
    "name": "Roboto Mono",
    "family": "Roboto Mono Variable",
    "package": "@fontsource-variable/roboto-mono",
    "category": "monospace"
  }
]

Issue tracker

At https://todo.sr.ht/~giorgio93p/fontsource-variable-discover.

Please specify that your issue is related to @gpits/vite-fontsource-variable-discover.

License

European Union Public Licence 1.2