Font & Typography

APIToGo allows you to customize fonts for text (sans), serif content (serif), and code (mono). You can use predefined Google Fonts, external sources, or local fonts.

Fonts go under fonts in the portal's theme file, apitogo/portal/theme.json. See Colors & theme for the rest of that file. Local font files go in apitogo/portal/public/, which the portal serves at /.

Predefined Google Fonts

The easiest way to use fonts is with predefined Google Fonts. Simply specify the font name as a string:

apitogo/portal/theme.json
{
  "fonts": {
    "sans": "Inter",
    "serif": "Merriweather",
    "mono": "JetBrains Mono"
  }
}

Available Google Fonts

The following fonts are available as predefined options:

Sans Serif: Inter, Roboto, Open Sans, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, IBM Plex Sans, Geist, Oxanium, Space Grotesk

Serif: Architects Daughter, Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville

Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Roboto Mono, Space Mono, Geist Mono

Custom Font URLs

For more control or to use fonts not in the predefined list, you can specify a custom font URL:

apitogo/portal/theme.json
{
  "fonts": {
    "sans": {
      "url": "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
      "fontFamily": "Roboto, sans-serif"
    },
    "mono": {
      "url": "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap",
      "fontFamily": "Roboto Mono, monospace"
    }
  }
}

Local Fonts

To use local fonts, add them to the public folder and create a fonts.css file:

Code
@font-face {
  font-family: "CustomFont";
  font-style: normal;
  font-weight: 400;
  src: url("/custom-font-400.woff2") format("woff2");
}

Then reference the local CSS file:

apitogo/portal/theme.json
{
  "fonts": {
    "sans": {
      "url": "/fonts.css",
      "fontFamily": "CustomFont, sans-serif"
    }
  }
}

Mixed Configuration

You can mix predefined fonts with custom fonts:

apitogo/portal/theme.json
{
  "fonts": {
    "sans": "Inter",
    "serif": {
      "url": "/custom-serif.css",
      "fontFamily": "CustomSerif, serif"
    },
    "mono": "Fira Code"
  }
}