Configuration

This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal docs.

Customization

Font

External source

const config = {
  theme: {
    sans: {
      fontFamily: "Roboto, sans-serif",
      url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
    },
    // same for `mono`
  },
};
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: {
    sans: {
      fontFamily: "Roboto, sans-serif",
      url: "/fonts.css",
    },
  },
};
typescript