tailwindcss: add font-face in plugin - tailwind-css

Question

I try to include some font faces into a tailwind-preset I want to use across multiple projects.
In the documentation it is only described how to define font-faces within the base layer of a css file, see here: https://tailwindcss.com/docs/adding-base-styles#font-face-rules.
However to include it in a distributable preset the way to go (from my knowledge), is to include it in a plugin. However I do not get what is the problem.
My approach is the following:
const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')
module.exports = {
prefix: '',
mode: 'jit',
purge: {
content: [
'./src/**/*.{html,ts,css,scss,sass,less,styl}',
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['myfont', ...defaultTheme.fontFamily.sans]
},
}
},
variants: {
extend: {},
},
plugins: [ plugin(function ({ addBase}) {
const fonts = {
'#font-face': [
{
fontFamily: 'My Font',
fontStyle: 'normal',
fontWeight: 400,
src:
'url("./fonts/my-font.woff") format("woff");'
},
]
};
addBase(fonts);
})],
};

Answer 1

Your plugin looks correct, but the fontFamily defined in the #font-face rule should be the same as the fontFamily defined in the font-family CSS rule. Try changing myfont to My Font in your theme extension config.
See this Tailwind Play REPL for an example.