Choosing Fonts

Pick from eleven curated fonts on a single element or for a whole tab, and let elements inherit the tab default unless they override it.

livediagram gives you a curated set of eleven typefaces so a diagram can read as crisp, friendly, formal, or hand-drawn without becoming a font free-for-all. You can apply a font to one element or set it as the default for a whole tab, and the two levels work together so you only set what you actually want to override.

The eleven fonts

The set spans a deliberate spread of voices:

  • Inter: a clean, neutral sans-serif for everyday diagrams.
  • Poppins: a geometric sans with a modern feel.
  • Nunito: a rounded sans that reads as friendly.
  • Oswald: a condensed sans with headline presence.
  • Space Grotesk: a grotesque sans with a technical edge.
  • Lora: a serif for a more formal, editorial look.
  • Abril Fatface: a high-contrast display serif for bold statements.
  • Roboto Slab: a slab serif with extra weight and presence.
  • Roboto Mono: a monospace, handy for code or technical labels.
  • Caveat: a handwriting face for a sketched, informal feel.
  • Permanent Marker: a marker-pen face for loud, hand-drawn emphasis.

Setting a font on one element

To change a single element's typeface, open its inline text-editing controls and pick a font from the menu. Choosing a font sets it on that element alone; choosing the "Tab default" option clears the override so the element follows the tab again. Arrows are the exception: their text controls in the right-click menu cover styling, size, and colour, but offer no font picker.

Step oneInterRobotoPoppinsNunitoLoraCaveatFONT
The font menu on a selected element, with one typeface highlighted to apply to that element alone.

Setting a tab default

To set the typeface for everything on a tab at once, use the Font option in the tab or canvas context menu. This sets the default for every text element on the tab that has not chosen its own font. The same menu lets you set a default text size for new elements, which is copied onto each element as you add it, so changing the default later never resizes the shapes already on your canvas. A fresh canvas starts at a compact small size by default.

How the levels combine

Any piece of text resolves its font in order: an element's own font wins first, then the tab's default, then livediagram's built-in fallback. Arrows follow the same rules: there is no font picker for them, so they normally use the tab default, but a font applied another way (for example with the format painter) sticks to the arrow like any other override. This means you can set one tab-wide typeface and only override the few labels you want to stand out.

Text stays visible in a fallback face while a font loads, so your diagram is always readable, even offline or where Google Fonts is blocked.

Was this article helpful?