Zuplo
Customization

​Font & Typography

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.

When it comes to fonts Dev Portal 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
← Previous page
Colors & Theme
Next page →
Markdown