How do I add fonts in via addBase?

[roboman-sil]

Hi there, I would like to add fonts in via add base. I tried searching for a few hours online for examples but most of them just mentioned injecting the fonts in through addBase, which I do not quite understand.

This is what I've tried.

`const plugin = require("tailwindcss/plugin");

module.exports = {
theme: {
fontFamily: {
body: ['Open Sans', 'Roboto'],
},
extend: {},
},
variants: {},
plugins: [
plugin(function({ addBase, config }) {
addBase({
'@font-face': {
fontFamily: 'Open Sans',
fontWeight: 400,
src: 'url("/src/assets/fonts/OpenSans-Regular.ttf") format("truetype")'
},
'h1': { fontSize: config('theme.fontSize.5xl') },
'h2': { fontSize: config('theme.fontSize.4xl') },
'h3': { fontSize: config('theme.fontSize.3xl') },
'h4': { fontSize: config('theme.fontSize.2xl') },
'h5': { fontSize: config('theme.fontSize.xl') },
'h6': { fontSize: config('theme.fontSize.base') },
'p': { fontSize: config('theme.fontSize.lg') },
'span': {fontSize: config('theme.fontSize.sm') }
})
})
],
}
`

[buismaarten]

1. Use Google Fonts, it does have the Open Sans font
2. Change your config as described here: https://tailwindcss.com/docs/font-family#font-families