https://github.com/madeleineostoja/postcss-fontpath

PostCSS plugin to automatically generate font-face src sets based on a path to font files
https://github.com/madeleineostoja/postcss-fontpath

css font-face postcss postcss-plugin

Last synced: about 2 months ago
JSON representation

PostCSS plugin to automatically generate font-face src sets based on a path to font files

• Host: GitHub
• URL: https://github.com/madeleineostoja/postcss-fontpath
• Owner: madeleineostoja
• License: mit
• Created: 2015-07-04T08:24:03.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2022-02-11T00:36:55.000Z (over 2 years ago)
• Last Synced: 2024-07-27T00:38:19.307Z (about 2 months ago)
• Topics: css, font-face, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 62.5 KB
• Stars: 55
• Watchers: 4
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Fontpath

[![NPM version][npm-badge]][npm-url] [![Downloads][downloads-badge]][npm-url] [![Build Status][travis-badge]][travis-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.woff2") format('woff2'),

       url("/path/to/font/file.woff") format('woff'),

       url("/path/to/font/file.ttf") format('truetype'),

       url("/path/to/font/file.otf") format('opentype'),

       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.woff2") 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: 'opentype', ext: 'otf' }, { 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

[downloads-badge]: https://img.shields.io/npm/dm/postcss-fontpath.svg

[travis-badge]: https://travis-ci.org/seaneking/postcss-fontpath.svg?branch=master

[travis-url]: https://travis-ci.org/seaneking/postcss-fontpath

[PostCSS]: https://github.com/postcss/postcss

[fontspring]: http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/