postcss-fontpie

A PostCSS plugin for optimizing font loading layout shifts using fontpie!

Features

• Automated: Generates fallback font metrics to match any custom web font!
• Flexible: Handles font type (sans serif, serif, and monospace), weight, and style
• Robust: Powered by the superb fontpie

Install

$ npm i postcss-fontpie

Usage

input.css

@font-face {
  font-family: 'Noto Serif';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url(NotoSerif-Italic.ttf) format('ttf');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(Roboto-Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(UbuntuMono-Bold.ttf) format('ttf');
}

index.js:

import fs from 'node:fs/promises'
import { join } from 'node:path'
import postcss from 'postcss'
import postcssFontpie from 'postcss-fontpie'

const inputPath = `input.css`
const inputCss = await fs.readFile(inputPath, `utf8`)

const outputPath = `output.css`
const outputCss = (
  await postcss([
    postcssFontpie({
      // A mapping from `font-family` to its font type (`sans-serif`, `serif`, or `mono`).
      fontTypes: {
        'Noto Serif': `serif`,
        Roboto: `sans-serif`,
        'Ubuntu Mono': `mono`,
      },

      // An optional function that transforms a font face to a path to the font
      // file.
      resolveFilename: fontFace => join(`./path/to/fonts`, fontFace.src),
    }),
  ]).process(css, { from: inputPath, to: outputPath })
).css
await fs.writeFile(outputPath, outputCss)

output.css:

@font-face {
  font-family: 'Noto Serif Fallback';
  font-style: italic;
  font-weight: 400;
  src: local(Times New Roman Italic);
  ascent-override: 91.94%;
  descent-override: 25.2%;
  line-gap-override: 0%;
  size-adjust: 116.25%;
}

@font-face {
  font-family: 'Noto Serif';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url(NotoSerif-Italic.ttf) format('ttf');
}

@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 400;
  src: local(Arial);
  ascent-override: 92.49%;
  descent-override: 24.34%;
  line-gap-override: 0%;
  size-adjust: 100.3%;
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(Roboto-Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Ubuntu Mono Fallback';
  font-style: normal;
  font-weight: 700;
  src: local(Courier New Bold);
  ascent-override: 99.62%;
  descent-override: 20.4%;
  line-gap-override: 0%;
  size-adjust: 83.32%;
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(UbuntuMono-Bold.ttf) format('ttf');
}

The plugin can also be used in postcss.config.js. See fontpie for font format support and browser compatibility.

Contributing

Stars are always welcome!

For bugs and feature requests, please create an issue.

License

MIT © Tomer Aberbach
Apache 2.0 © Google