# postcss-fontpath

> PostCSS plugin that adds a font-path attribute to @font-face which expands to the FontSpring syntax

Latest version **1.0.0** (published 2017-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-fontpath
pnpm add postcss-fontpath
yarn add postcss-fontpath
bun add postcss-fontpath
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-07-26 |
| First published | 2015-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Sean King |
| Maintainers | seaneking |
| Keywords | postcss, css, postcss-plugin, font-face |

## Links

- npm: https://www.npmjs.com/package/postcss-fontpath
- Repository: https://github.com/seaneking/postcss-fontpath
- Issues: https://github.com/seaneking/postcss-fontpath/issues
- npm.io page: https://npm.io/package/postcss-fontpath

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^6.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-07-26
- 0.3.0 — 2016-04-26
- 0.2.0 — 2015-09-06
- 0.1.1 — 2015-07-06
- 0.1.0 — 2015-07-04

## README

# PostCSS Fontpath
[![NPM version][npm-badge]][npm-url] [![Build Status][travis-badge]][travis-url] [![Dependency Status][daviddm-badge]][daviddm-url]

[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](http://simplaio.github.io/rucksack)_

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

## Usage

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

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

See [PostCSS][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.

```js
{
  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](http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/) 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;
}
```

## Options

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](https://twitter.com/seaneking)

[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/

---
_Source: https://npm.io/package/postcss-fontpath · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._