A PostCSS plugin for optimizing font loading layout shifts using fontpie!
npm install postcss-fontpie- 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
``sh`
$ npm i postcss-fontpie
input.css
`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:
`js
import fs from 'node:fs/promises'
import { join } from 'node:path'
import postcss from 'postcss'
import postcssFontpie from 'postcss-fontpie'
const inputPath = input.cssutf8
const inputCss = await fs.readFile(inputPath, )
const outputPath = output.cssfont-family
const outputCss = (
await postcss([
postcssFontpie({
// A mapping from to its font type (sans-serif, serif, or mono).serif
fontTypes: {
'Noto Serif': ,sans-serif
Roboto: ,mono
'Ubuntu 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:
`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. Seefontpie` for font format support and
browser compatibility.
Stars are always welcome!
For bugs and feature requests,
please create an issue.