How do I add fonts in via addBase? #1762
roboman-sil
started this conversation in
General
Replies: 1 comment
-
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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') }
})
})
],
}
`
Beta Was this translation helpful? Give feedback.
All reactions