PostCSS plugin that transforms @fontsource src CSS properties values to
point URLs to your own custom directory.
npm add --save-dev postcss-fontsource-urlMove the @fontsource fonts to your public directory:
📁 dist
└── 📁 assets
└── 📁 fonts
├── roboto-mono-latin-400-normal.woff
└── roboto-mono-latin-400-normal.woff2/* stylesheet.css */
@import '@fontsource/roboto-mono/400.css';// postcss.config.mjs
import postcssImport from 'postcss-import';
import postcssFontsourceUrl from 'postcss-fontsource-url';
export default {
plugins: [
postcssImport,
postcssFontsourceUrl({directory: '/assets/fonts'}),
],
};The imported CSS will be transformed to something like this:
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/roboto-mono-latin-400-normal.woff2') format('woff2'),
url('/assets/fonts/roboto-mono-latin-400-normal.woff') format('woff');
}From the original CSS:
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: url('./files/roboto-mono-latin-400-normal.woff2') format('woff2'),
url('./files/roboto-mono-latin-400-normal.woff') format('woff');
}If you need a more specific solution for the problem, use postcss-url
directly:
// postcss.config.mjs
import postcssUrl from 'postcss-url';
export default {
plugins: {
postcssUrl({
url(asset) {
// Rewrite @fontsource fonts URLs to use the `/assets/fonts` folder
// instead of the default `./files/` path.
if (asset.url.startsWith('./files/')) {
return `/assets/fonts/${asset.url.slice('./files/'.length)}`;
}
return asset.url;
},
}),
},
};