Skip to main content

Fonts

Quick reference

  • The site's typeface is Schibsted Grotesk, a Grotesque Sans Serif family from Google Fonts.
  • It's loaded from Google Fonts in docusaurus.config.js and set as --ifm-font-family-base in src/css/custom.css so it applies everywhere by default — no per-component import needed.
  • The full variable font is loaded: all weights (400–900) and italics.
  • To use a specific weight inline, set font-weight (e.g. font-weight: 600) rather than adding a new font import — Schibsted Grotesk's variable weight axis already covers it. There's also a .semibold utility class (font-weight: 600) for inline emphasis.
  • The monospace font is still Roboto Mono — only the base (body/heading) font changed.

Why Schibsted Grotesk​

Schibsted Grotesk is a Grotesque sans-serif with a bit more character than a neutral system font — slightly rounded terminals and a warmer rhythm — while staying highly readable across sizes and weights. It's the base font family for the whole site (body text, headings, nav) via Infima's --ifm-font-family-base.

Where it's loaded​

Fetching it as a variable font (single request, every weight/italic combination) instead of a fixed set of static weights:

docusaurus.config.js
headTags: [
  { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
  { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' } },
],

// Schibsted Grotesk: all weights (400-900) and italics
// Roboto Mono: all weights (100-700), used for the site's monospace font
stylesheets: [
  'https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap',
],

The preconnect hints open the connections to Google's font hosts early, and the stylesheet URL's ital,wght axis range is what pulls in every weight/italic combination in one file instead of one request per static weight.

Where it's applied​

src/css/custom.css
:root {
  --ifm-font-family-base: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

--ifm-font-family-base is Infima's base font variable, so setting it once here makes Schibsted Grotesk the default everywhere — body copy, headings, nav, sidebar. The fallback stack (system-ui, -apple-system, Segoe UI, sans-serif) only kicks in if the Google Fonts request fails.

Diagram components (src/components/*Diagrams) that render text in SVG reference the same variable (font-family: var(--ifm-font-family-base)) rather than hard-coding a specific font name, so they stay in sync if the base font ever changes.

Weight utilities​

src/css/custom.css
.hero__title {
  font-weight: 900;
}

.hero__subtitle {
  font-weight: 300;
  font-size: 1.35rem;
}

.semibold {
  font-weight: 600;
}

.semibold is a small helper for emphasizing a phrase inline (e.g. <span class="semibold">End users</span>) without introducing a <strong> or a one-off inline style.

Changing the font​

To swap the typeface: update the Google Fonts stylesheets URL in docusaurus.config.js to the new family, then update --ifm-font-family-base in src/css/custom.css to match. Everything else (headings, diagrams, utility classes) inherits from that one variable.