PostCSS plugin to automatically generate font-face src sets based on a path to font files
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test es6ify Aug 5, 2017
.eslintrc es6ify Aug 5, 2017
.gitignore Add DS_Store to gitignore Jul 7, 2017
.npmignore init Jul 4, 2015
.travis.yml update travis Jul 26, 2017 update changelog Jul 26, 2017
LICENSE add license Jul 26, 2017 add downloads badge to readme Aug 5, 2017
index.js es6ify Aug 5, 2017
package.json remove gulp buildstep Aug 5, 2017
yarn.lock es6ify Aug 5, 2017

PostCSS Fontpath

NPM version Downloads Build Status

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


@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
  font-weight: normal;
  font-style: normal;


@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;


var fontpath = require('postcss-fontpath');

postcss([ fontpath({ ... }) ]);

See 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.

  formats: [
    { type: 'woff2', ext: 'woff2' },
    { type: 'embedded-opentype', ext: 'eot' }

File checking

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

IE8 support

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

@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