A postcss plugin to automatically add classes for the FOFT font loading strategy.
npm install postcss-foft-classesA 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.
npm install postcss-foft-classes
See the full FOUT with a Class example code, with font faces and the JavaScript code that goes with it.
See this working in ./gulp-test/.
``js`
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["Lato"],
classNames: ["fonts-loaded"]
}
]
})
])
)
`css`
body {
font-family: Lato, sans-serif;
}
`css
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: Lato;
}
`
See the full FOFT example code, with font faces and the JavaScript code that goes with it.
See this working in ./gulp-test/.
`js`
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["LatoInitial", "Lato"],
classNames: ["fonts-loaded", "fonts-loaded-2"]
}
]
})
])
)
`css`
body {
font-family: Lato, sans-serif;
}
`css
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: LatoInitial;
}
.fonts-loaded-2 body {
font-family: Lato;
}
``