Customization
Font & Typography
When it comes to fonts Zudoku allows you to define a font for text sans
and for code mono
. You can use an external source or a local source.
External source
const config = { theme: { fonts: { sans: { fontFamily: "Roboto, sans-serif", url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap", }, mono: { fontFamily: "Roboto Mono, monospace", url: "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap", }, }, }, };typescript
Local source
To use local fonts you can add them to the public
folder and create a fonts.css
in there:
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: url("/roboto-400.woff2") format("woff2"); } /* ... */css
Then you can create a font
object in your config as above and set the url
to /fonts.css
.
const config = { theme: { fonts { sans: { fontFamily: "Roboto, sans-serif", url: "/fonts.css", }, mono: { fontFamily: "Roboto Mono, monospace", url: "/fonts.css", }, } }, };typescript