postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies. Based heavily on netlify/postcss-fout-with-a-class.

Documentation currently only has Gulp config examples but is open to contributions with other build tool configurations! This works anywhere postcss does.

Installation

npm install postcss-foft-classes

Sample: FOUT, Single Stage

See the full FOUT with a Class example code, with font faces and the JavaScript code that goes with it.

$3

See this working in ./gulp-test/.

``js
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["Lato"],
classNames: ["fonts-loaded"]
}
]
})
])
)
`

$3

`css
body {
font-family: Lato, sans-serif;
}
`

$3

`css
body {
font-family: sans-serif;
}

.fonts-loaded body {
font-family: Lato;
}
`

Sample: FOFT, Two Stages

See the full FOFT example code, with font faces and the JavaScript code that goes with it.

$3

See this working in ./gulp-test/.

`js
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["LatoInitial", "Lato"],
classNames: ["fonts-loaded", "fonts-loaded-2"]
}
]
})
])
)
`

$3

`css
body {
font-family: Lato, sans-serif;
}
`

$3

`css
body {
font-family: sans-serif;
}

.fonts-loaded body {
font-family: LatoInitial;
}

.fonts-loaded-2 body {
font-family: Lato;
}
``