PostCSS plugin that adds a font-path attribute to @font-face which expands to the FontSpring syntax
npm install postcss-fontpath[PostCSS][PostCSS] plugin that automatically generates src values for @font-face rules based on the path to your font files. You can manually provide the types of sources to output, or automatically generate sources based on the font files that actually exist in your project.
_Part of Rucksack - CSS Superpowers_
Input
``css`
@font-face {
font-family: 'My Font';
font-path: '/path/to/font/file';
font-weight: normal;
font-style: normal;
}
Output
`css`
@font-face {
font-family: 'My Font';
src: url("/path/to/font/file.eot") format('embedded-opentype'),
url("/path/to/font/file.woff") format('woff2'),
url("/path/to/font/file.woff") format('woff'),
url("/path/to/font/file.ttf") format('truetype'),
url("/path/to/font/file.svg") format('svg');
font-weight: normal;
font-style: normal;
}
`js
var fontpath = require('postcss-fontpath');
postcss([ fontpath({ ... }) ]);
`
See [PostCSS][PostCSS] docs for examples for your environment.
By default postcss-fontpath generates src values for all valid font types. You can change the default sources generated by providing an array of custom src formats in the formats option. Each format requires a type and a file extension to map to. The order of the formats in the array determines the ordering of the src values outputted.
`js`
{
formats: [
{ type: 'woff2', ext: 'woff2' },
{ type: 'embedded-opentype', ext: 'eot' }
]
}
Postcss-fontpath can automatically check the path you give it and only generate src values for the files that actually exist in your project with the checkFiles option.
> Remember that postcss-fontpath checks paths based on your current directory structure - if your production environment differs from your development setup (eg: transformed in a buildstep) then this method could result in incorrect declarations
If you need to support IE8 (which doesn't support multiple src values or format()), postcss-fontpath can generate a FontSpring style IE8 hack with the ie8Fix option, resulting in an output like this
`css`
@font-face {
font-family: 'My Font';
src: url("/path/to/font/file.eot");
src: url("/path/to/font/file.eot?#iefix") format('embedded-opentype'),
url("/path/to/font/file.woff") format('woff2'),
...
font-weight: normal;
font-style: normal;
}
Option | Type | Default | Description
------------ | ------- | ------- | -----------
formats | Array | [ { type: 'embedded-opentype', ext: 'eot' }, { type: 'woff2', ext: 'woff2' }, { type: 'woff', ext: 'woff' }, { type: 'truetype', ext: 'ttf' }, { type: 'svg', ext: 'svg'} ] | Default font formats to generate src values for checkFiles | Boolean | false | Whether to generate src values based on the font files that actually exist at the given font-path ie8Fix | Boolean | false` | Whether to generate a hack for IE8 support
*
MIT © Sean King
[npm-badge]: https://badge.fury.io/js/postcss-fontpath.svg
[npm-url]: https://npmjs.org/package/postcss-fontpath
[travis-badge]: https://travis-ci.org/seaneking/postcss-fontpath.svg?branch=master
[travis-url]: https://travis-ci.org/seaneking/postcss-fontpath
[daviddm-badge]: https://david-dm.org/seaneking/postcss-fontpath.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/seaneking/postcss-fontpath
[PostCSS]: https://github.com/postcss/postcss
[fontspring]: http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/