Tailwind custom Font being removed from Plugin - css

Question

I have successful loaded in two custom font to my codebase that is using tailwind. My issue is that when I use a plugin to create a base set of styles for my HTML the custom font is ignored then is reverted to the back up.
This only happens when I use the theme directory callback in the plugin. If I hardcode the fontFamily name in there then it works correctly.
tailwind.config.js
/**
* Configuration
*/
module.exports = {
theme: {
fontFamily: {
display: ['New Grotesk', 'arial'],
body: ['Founders Grotesk', 'arial']
}
},
plugins: [
globalStyles,
],
}
Plugin
const globalStyles = ({ addBase, config }) => {
addBase({
'h1, h2, h3, h4, h5': {
marginBottom: config('theme.margin.2'),
lineHeight: config('theme.lineHeight.tight'),
fontFamily: config('theme.fontFamily.display')
},
});
}
If I swap out fontFamily: config('theme.fontFamily.display') for fontFamily: 'New Grotesk'. It works correctly but this defeats the purpose of using the config function.
I know this is a possible extending the #base scss but I would prefer to do it this way.
Here is a screenshot of the fontFamily being ignored by my browser

Answer 1

Your problem is the need to add double quotes in your font-family stack when using a font that has a space in the name:
// Won't work
fontFamily: {
display: ['New Grotesk', 'arial'],
}
// Add quotes 👍🏼:
fontFamily: {
display: ['"New Grotesk"', 'arial'],
}
Ref: https://tailwindcss.com/docs/font-family#font-families