Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-cosmos/llms.txt

Use this file to discover all available pages before exploring further.

Aurora Cosmos uses a deliberate three-font system: a geometric sans for display headings, a humanist sans for body copy, and a monospaced face for code blocks and terminal-style labels. All three are loaded from Google Fonts via a single @import declaration at the very top of assets/main.css. Because the repo is a compiled static output, changing a typeface means updating that URL and the font-family values in the CSS rules — no config files or build step required.

​
Current font roles

RoleFontCSS ClassWeights Loaded
Display / Headings (h1–h6)Space Groteskfont-display400, 500, 600, 700
Body text (default)Plus Jakarta Sansfont-sans400, 500, 600, 700
Code / TerminalJetBrains Monofont-mono400, 700

​
Google Fonts import

The entire font stack is fetched via a single optimized URL at the very first line of assets/main.css. Replacing any face means updating this one string. 
/* assets/main.css — line 1 */
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";

​
Changing a font

1

Choose a replacement from Google Fonts

Visit fonts.google.com and select a typeface. Note the exact family name as it appears in the URL parameter (e.g. Inter, Outfit, DM+Sans). Pick the same weight variants you need — the template uses 400 through 700 for display and body fonts.
2

Update the @import URL in assets/main.css

Replace the family name and weight string for the font you are swapping. For example, to use Inter instead of Plus Jakarta Sans for body text:
/* assets/main.css — line 1 */
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";
3

Update the font-family values in assets/main.css

The compiled CSS sets font families directly on element rules. Search assets/main.css for the family name you are replacing and update every occurrence.For body text (Plus Jakarta Sans → Inter), find and replace the html and body rules:
/* assets/main.css — html base rule */
html, :host {
  font-family: Inter, sans-serif; /* was: Plus Jakarta Sans, sans-serif */
}

/* assets/main.css — body rule */
body {
  font-family: Inter, sans-serif; /* was: Plus Jakarta Sans, sans-serif */
}
The compiled CSS also contains a .font-display utility class that sets the display font, and a .font-mono utility class for the monospace font. Update those too if you are replacing the corresponding typeface:
/* assets/main.css — font utility classes */
.font-display { font-family: Space Grotesk, sans-serif; } /* ← update for display font changes */
.font-mono    { font-family: JetBrains Mono, monospace; } /* ← update for mono font changes */
4

Update the heading base rule (display font only)

If you are replacing the display font (Space Grotesk), also update the h1–h6 base rule that explicitly sets the family and tight letter-spacing. This rule sits in the compiled stylesheet and targets all heading levels.
/* assets/main.css — heading base styles */
h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", sans-serif; /* ← replace with new display font */
  letter-spacing: -0.025em;                 /* tracking-tight, keeps headings crisp */
  color: rgb(255 255 255);
}

​
Heading base styles

Beyond the font-family assignment, headings receive two extra rules defined globally in assets/main.css. The negative letter-spacing (-0.025em) is what gives Space Grotesk its condensed, high-contrast feel at large sizes — keep this in mind when choosing a replacement, as some fonts look better with neutral or even slightly positive tracking. 
/* assets/main.css — applied to h1 through h6 globally */
h1, h2, h3, h4, h5, h6 {
  font-family: Space Grotesk, sans-serif;
  letter-spacing: -0.025em;
  color: rgb(255 255 255);
}
The .font-display CSS class used throughout the template is a compiled Tailwind utility — it is not related to the CSS font-display descriptor used in @font-face rules. In the compiled output, elements with class="font-display" render in Space Grotesk. The standard font-sans mapping (Plus Jakarta Sans) is also set as the default font-family on the html element in the compiled base reset.
For production deployments where external network requests are a concern, consider self-hosting fonts using Fontsource. Download the font files and place them in your repository, then replace the @import URL at the top of assets/main.css with @font-face declarations pointing to the local files. This eliminates the Google Fonts DNS lookup and is GDPR-friendlier for European visitors.

Build docs developers (and LLMs) love

Get started for freeTalk to us