Use the font your site already uses (the default)

Do nothing. Every embed inherits typography from the element it sits in, so it picks up whatever your page has set on `body` — including a webfont you load yourself. An `@font-face` declared in your page applies inside the embed’s shadow DOM, so a font you already ship needs no extra wiring at all.

Point the embed at a font you load yourself

If the embed sits somewhere that doesn’t inherit the right font — inside a card with its own type, or on a page where you want the widget to read differently — name your stack explicitly. You load the font; we render in it. Set the heading property too if your headings use a second face.

/* Your own @font-face, in your own stylesheet. */
@font-face {
  font-family: "Söhne";
  src: url(/fonts/soehne.woff2) format("woff2");
  font-display: swap;
}

sessions-context {
  --sessions-typography-family: "Söhne", system-ui, sans-serif;
  --sessions-typography-heading-family: "Söhne Breit", "Söhne", sans-serif;
}

If the embed isn’t picking up your font

Almost always one of three things. (1) Your `@font-face` is declared inside another shadow root rather than in the page document — font faces are document-scoped, so move it to a page-level stylesheet. (2) You named a family in `--sessions-typography-family` that nothing on the page actually loads, so it falls back; check the Network tab for the font file. (3) Something between your `body` and the embed resets `font-family`, so there is nothing useful to inherit — name your stack explicitly. In every one of these cases the embed renders in a fallback stack rather than breaking.

Square corners everywhere

One value does it. Taking the base step to `0` flattens the derived corners with it, so the round controls square off too — that is the whole point of deriving them rather than hard-coding a pill.

sessions-context {
  --sessions-radius-xs: 0;
  --sessions-radius-sm: 0;
  --sessions-radius-base: 0;
  --sessions-radius-lg: 0;
  --sessions-radius-xl: 0;
  /* Buttons do not track the scale — flatten them explicitly. */
  --sessions-button-border-radius: 0;
}

Square chrome, round controls

The derived defaults are only defaults. Pin `--sessions-control-border-radius` and the radio dots and toggles stay circular no matter how flat the rest of the scale goes.

sessions-context {
  --sessions-radius-base: 0;
  --sessions-button-border-radius: 0;
  --sessions-control-border-radius: 999px;
}