# postcss-fontstack

> easy insertion of font stacks into font-family declarations

Latest version **0.1.7** (published 2020-05-26) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2020-05-26 |
| First published | 2017-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 13.3 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | tomoyuen |
| Maintainers | tomoyuen |
| Keywords | postcss-plugin, font-stack |

## Links

- npm: https://www.npmjs.com/package/postcss-fontstack
- Repository: https://github.com/tomoyuen/postcss-fontstack
- Homepage: https://github.com/tomoyuen/postcss-fontstack#readme
- Issues: https://github.com/tomoyuen/postcss-fontstack/issues
- npm.io page: https://npm.io/package/postcss-fontstack

## Dependencies (1)

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

## Recent versions

- 0.1.7 (latest) — 2020-05-26
- 0.1.6 — 2020-05-26
- 0.1.5 — 2019-09-02
- 0.1.4 — 2019-06-20
- 0.1.3 — 2019-03-12
- 0.1.1 — 2019-02-21
- 0.1.0 — 2017-07-23

## README

# PostCSS Fontstack [![Build Status][travis-img]][travis]

Easy insertion of font stacks into font-family declarations

```css
body {
  font-family: 'Open Sans', fontstack('Arial');
}

h2 {
  font-family: fontstack('');
}

/* results */
body {
  font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;
}

h2 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
```

## Usage
Add [PostCSS Fontstack](https://github.com/tomoyuen/postcss-fontstack) in your project.

`npm i postcss-fontstack -D`

Use [PostCSS Fontstack](https://github.com/tomoyuen/postcss-fontstack) to process your CSS:

```javascript
import FontStack from 'postcss-fontstack'

FontStack.process(YOUR_CSS /*, processOptions, pluginOptions */);
```

Or use it as a [PostCSS](https://github.com/postcss/postcss) Plugin:

```javascript
import postcss from 'postcss';
import FontStack from 'postcss-fontstack';

postcss([
  FontStack(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```

[PostCSS Stack](https://github.com/tomoyuen/postcss-fontstack) runs with Webpack

Add PostCSS Loader to your project:

`npm i postcss-loader -D`

Use PostCSS Fontstack in your Webpack configuration:

```javascript
const FontStack = require('postcss-fontstack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                FontStack(/* pluginOptions */)
              ]
            }
          }
        ]
      }
    ]
  }
}
```

## Options

### fontstacks

You can custom the fontstacks by the `fontstacks` option.

```javascript
FontStack({
  fontstacks: {
    'Tomo': '"Tomo Regular", Arial, sans-serif',
  }
})
```

```css
body {
  font-family: fontstack('Tomo');
}

/* results */
body {
  font-family: 'Tomo Regular', Arial, sans-serif;
}
```

### Misc

the default fontstacks
```json
  default: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',

  // Sans-serif
  'Arial': 'Arial, "Helvetica Neue", Helvetica, sans-serif',
  'Arial Black': '"Arial Black", "Arial Bold", Gadget, sans-serif',
  'Arial Narrow': '"Arial Narrow", Arial, sans-serif',
  'Gill Sans': '"Gill Sans", "Gill Sans MT", Calibri, sans-serif',
  'Tahoma': 'Tahoma, Verdana, Segoe, sans-serif',
  'Verdana': 'Verdana, Geneva, sans-serif',

  // Serif
  'Georgia': 'Georgia, Times, "Times New Roman", serif',
  'Palatino': 'Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif',
  'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif',

  // Monospaced
  'Courier New': '"Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace',
  'Lucida Sans Typewriter': '"Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace',

  // Fantasy
  'Copperplate': 'Copperplate, "Copperplate Gothic Light", fantasy',
  'Papyrus': 'Papyrus, fantasy',

  // Script
  'Brush Script MT': '"Brush Script MT", cursive'
```

[travis-img]: https://travis-ci.org/tomoyuen/postcss-fontstack.svg
[travis]: https://travis-ci.org/tomoyuen/postcss-fontstack

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