PostCSS Fontpath

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

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

Output

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

Usage

var fontpath = require('postcss-fontpath');
 
postcss([ fontpath({ ... }) ]);

See PostCSS docs for examples for your environment.

Formats

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

Options

MIT © Sean King