@gpits/fontsource-variable-discover

Discover installed @fontsource-variable font packages from an application's package.json.

The package can be used as a TypeScript/JavaScript module or as a command-line tool. It can optionally generate:

• A CSS file containing @import statements for all discovered fonts.
• A JSON file containing the main metadata for each discovered font.

There following are also available, for more specialised needs:

• A vite plugin that encaplulates this package
• 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.

Installation

npm install @gpits/fontsource-variable-discover

Also install your preferred fontsource-variable fonts, e.g.

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

How discovery works

The package:

1. Reads the application's package.json.
2. Collects dependencies whose names start with @fontsource-variable/. Optionally includes matching devDependencies.
3. Resolves each installed font package and reads its metadata.json.
4. Optionally generates CSS and/or JSON output files.
5. When using as a library, returns basic font metadata.

For example, given an application with:

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

the package discovers those installed font packages and can generate this CSS:

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

and this JSON:

[
  {
    "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"
  }
]

Usage: CLI

After installation, the fontsource-variable-discover command is available.

Basic usage

Run the command from the root of your application:

npx fontsource-variable-discover --css-path resources/css/fonts.css --json-path resources/json/fonts.json

Specify --css-path to generate the CSS file (otherwise, no CSS file will be generated).

Specify --json-path to generate the JSON file (otherwise, no JSON file will be generated).

Include development dependencies

By default, devDependencies from the application's package.json are not inspected. To also discover fonts listed in devDependencies, add the --include-dev-dependencies option.

Custom root folder

By default, the application root is the current working directory. You may specify a different application root with --root-path.

npx fontsource-variable-discover --root-path ./my-app --css-path resources/css/fonts.css

Usage: Library

The package can also be used directly from TypeScript or JavaScript.

import fontsourceVariableDiscover from "@gpits/fontsource-variable-discover";
const result = await fontsourceVariableDiscover();

The discovered fonts are returned as FontResource objects; for example, result may be:

[
  {
    "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"
  }
]

Options

• includeDevDependencies: Also scan devDependencies
• cssPath: Where to output the CSS file; if missing, no file will be emitted
• jsonPath: Where to output the JSON file; if missing, no file will be emitted
• rootPath: The root of the application whose package.json and installed dependencies should be inspected

Pass them as an object to fontsourceVariableDiscover, e.g.

const result = await fontsourceVariableDiscover({
    includeDevDependencies: true
});

Issue tracker

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

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

License

European Union Public Licence 1.2