Custom Fonts

Learn how to use custom fonts in ctrl-alt-doc.

ctrl alt doc ships with a default font, but your project can use any font you prefer without modifying the framework.

ctrl alt doc's typography uses CSS custom properties. Load your preferred font in your project, then override the relevant font variable in custom.css.

Font variables #

css

:root {
	--font-sans: 'Outfit', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

Use --font-sans to change the main interface and documentation font, and --font-mono to change the font used for code.

Fontsource #

Install your preferred font:

bash

pnpm add @fontsource/inter

Import it in your application, for example from the root layout:

import '@fontsource/inter';

Then override the ctrl alt doc font in custom.css:

css

:root {
	--font-sans: 'Inter', system-ui, sans-serif;
}

You can do the same for a monospace font:

bash

pnpm add @fontsource/jetbrains-mono

import '@fontsource/jetbrains-mono';

css

:root {
	--font-mono: 'JetBrains Mono', monospace;
}

Google Fonts #

Load the font from Google Fonts and override the ctrl alt doc variable:

css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--font-sans: 'Inter', system-ui, sans-serif;
}

Self-hosted fonts #

Place your font files in static/fonts/, then define the font in custom.css:

css

@font-face {
	font-family: 'My Font';
	src: url('/fonts/my-font.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-sans: 'My Font', system-ui, sans-serif;
}

Your font files remain part of your project and are served from the static directory.

Changing both fonts #

You can override both typography variables together:

css

:root {
	--font-sans: 'Inter', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

ctrl alt doc provides the defaults. Your project owns the final font choice.