Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomeraberbach/postcss-fontpie
A PostCSS plugin for optimizing font loading layout shifts using fontpie!
https://github.com/tomeraberbach/postcss-fontpie
cls css fontpie fonts npm-module npm-package postcss postcss-plugin
Last synced: about 1 month ago
JSON representation
A PostCSS plugin for optimizing font loading layout shifts using fontpie!
- Host: GitHub
- URL: https://github.com/tomeraberbach/postcss-fontpie
- Owner: TomerAberbach
- License: apache-2.0
- Created: 2023-05-13T20:53:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-13T22:20:59.000Z (7 months ago)
- Last Synced: 2024-04-14T12:16:20.908Z (7 months ago)
- Topics: cls, css, fontpie, fonts, npm-module, npm-package, postcss, postcss-plugin
- Language: TypeScript
- Homepage: https://npm.im/postcss-fontpie
- Size: 1.03 MB
- Stars: 51
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license
Awesome Lists containing this project
README
postcss-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`](https://github.com/pixel-point/fontpie)
## Install
```sh
$ npm i postcss-fontpie
```
## Usage
**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.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**:
```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`](https://github.com/pixel-point/fontpie) for font format support and
browser compatibility.
## Contributing
Stars are always welcome!
For bugs and feature requests,
[please create an issue](https://github.com/TomerAberbach/postcss-fontpie/issues/new).
For pull requests, please read the
[contributing guidelines](https://github.com/TomerAberbach/postcss-fontpie/blob/main/contributing.md).
## License
[Apache License 2.0](https://github.com/TomerAberbach/postcss-fontpie/blob/main/license)
This is not an official Google product.