PostCSS Font Format Keywords lets you specify font formats as keywords, following the CSS Fonts specification.
```pcss @font-face { src: url(file.woff2) format(woff2); }
/ becomes /
@font-face { src: url(file.woff2) format("woff2"); } ```
See prior work by valtlai here postcss-font-format-keywords To ensure long term maintenance and to provide the needed features this plugin was recreated based on valtlai's work.
Add PostCSS Font Format Keywords to your project:
bash
npm install postcss @csstools/postcss-font-format-keywords --save-dev
Use it as a PostCSS plugin:
```js const postcss = require('postcss'); const postcssFontFormatKeywords = require('@csstools/postcss-font-format-keywords');
postcss([ postcssFontFormatKeywords(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```
PostCSS Font Format Keywords runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |
The preserve
option determines whether the original source
is preserved. By default, it is not preserved.
js
postcssFontFormatKeywords({ preserve: true })
```pcss @font-face { src: url(file.woff2) format(woff2); }
/ becomes /
@font-face { src: url(file.woff2) format("woff2"); src: url(file.woff2) format(woff2); } ```