postcss-webfontloader

Provides fallbacks for loading fonts with Web Font Loader.

---

Deprecated: Google Fonts started offering stylesheets with font-display: swap, which has a decent browser support, so you might want to consider using that instead of mimicking the same behavior by loading fonts with Web Font Loader and generating fallbacks using this PostCSS plugin.

---

Setup

yarn add postcss-webfontloader

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-webfontloader': {
      modules: false,
      families: [
        'Lora',
      ],
    },
  },
}

Basic usage

Input

/* base.css */
body {
  font-family: Lora, Georgia, serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

Output

/* base.css */
body {
  font-family: Georgia, serif;
}
.wf-active body {
  font-family: Lora, Georgia, serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

Output for CSS Modules

If you're using CSS Modules, set modules to true to get the following output:

/* base.css */
body {
  font-family: Georgia, serif;
}
:global(.wf-active) body {
  font-family: Lora, Georgia, serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}