Automatically font stacks into font-family declarations

Usage no npm install needed!

<script type="module">
  import postcssFontstackAuto from '';



PostCSS plugin to expand font names to web-safe stack automatically.

Originally postcss-fontstack force to use fontstack().

.some {
  font-family: Arial;
  font: 30px/20px Courier;
  /* will be unchanged */
  font-family: Arial, Roboto, sans-serif;

will be

.some {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 30px/20px "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  /* unchanged */
  font-family: Arial, Roboto, sans-serif;

Use postcss-minify-font-values for minifying.


Expand rules with your own font names and stacks.

  fontstack: [
    'YourScript': ['Arial', 'Helvetica Neue', 'Helvetica', 'sans-serif']


fontstack Array. Key is font name. Value is Array of font names (if it have whitespace in name then it will be in double quotes).

Every word in font name should start with uppercased letter, e.g. Unique-Light Sans.