Approach

First install @superflycss/cli:

npm i -g @superflycss/cli

Create a new project for NPM package.

sfc new saira-font-package
cd saira-font-package

Then npm i @superflycss/utilities-fonts, as we will be importing the saira font utility from there.

Replace the content in src/main/css/index.css with the saira font import such that the file looks like this:

@import "@superflycss/utilities-fonts/google/saira";

Try running sfc b and have a look at target/main/css/index.css. You will see the font face rules and utilities for the saira font are generated.

Now we will create the package install scripts. Replace package.json with this:

{
"name": "@fireflysemantics/css-saira-font",
"version": "1.0.0",
"description": "CSS Saira Font Package",
"scripts": {
    "i": "npm install -g del-cli && npm install -g @jsdevtools/version-bump-prompt && npm install -g npm-install-peers && npm i -g @superflycss/cli",
    "b": "sfc b",
    "s": "sfc s",
    "d": "sfc d",
    "p": "bump patch && del target && sfc b && cp package.json target/main/css/ && cd target/main/css && npm publish"
    },
    "main": "index.css",
    "keywords": [
        "css",
        "npm"
    ],
    "license": "MIT",
    "devDependencies": {
        "@superflycss/utilities-fonts": "^4.0.4"
    }
}

The script p will copy package.json into target/main/css and then run npm publish.

Thus now we can just run npm run p to publish the package.

Once published we can NPM install it like this:

npm i @fireflysemantics/css-saira-font

To use the package with Angular see Importing CSS from NPM Packages With Angular.

Creating NPM CSS Packages with SuperflyCSS | Task

Scenario

Approach