Skip to main content

Documentation Index

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

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

Typography is one of the most distinctive parts of Digital Domain’s personality. Three Google Fonts are loaded and mapped to named Tailwind utility classes, each serving a specific role in the UI hierarchy: Comic Neue as the readable everyday body font, VT323 for the chunky pixel-style headings that define the retro terminal aesthetic, and Courier Prime for monospaced contexts like code snippets and the typewriter career text. Together they give the site a layered feel — simultaneously nostalgic and legible.

​
Font Reference

FontTailwind ClassCSS font-family StackUse Case
Comic Neuefont-comicComic Neue, cursive, sans-serifBody text, paragraphs, form labels, nav buttons
VT323font-vt323VT323, monospaceRetro terminal headings, counters, window title bars
Courier Primefont-courierCourier Prime, monospaceMonospaced code blocks, career.txt typewriter text

​
Loading Mechanism

All three fonts are loaded at the very top of assets/main.css via a single @import rule pointing to the Google Fonts API. The import is consolidated into one request using the family query parameter, and display=swap is set to prevent invisible text during font load: 
/* assets/main.css — first line */
@import "https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=VT323&display=swap";
The import fetches:
  • Comic Neue — regular and bold weights, normal and italic styles
  • Courier Prime — regular and bold weights, normal and italic styles
  • VT323 — single weight (the font only has one)

​
Body Default

The body rule in main.css sets Comic Neue as the global default font: 
body {
  font-family: Comic Neue, cursive;
}
This means any element that does not explicitly apply font-vt323 or font-courier will automatically render in Comic Neue. You only need to apply font classes when you want to deviate from this base.

​
Usage Examples

// VT323 for retro pixel headings
<h1 className="font-vt323 text-5xl text-retro-purple">
  Hello, World!
</h1>

// Comic Neue for readable body text
<p className="font-comic text-lg">
  Welcome to my digital domain!
</p>

// Courier Prime for monospace / terminal text
<div className="font-courier text-sm whitespace-pre-wrap">
  {careerText}
</div>

​
Changing Fonts

To swap any of the three fonts for an alternative:
The committed repo ships pre-built output with no tailwind.config.js or package.json. To make font changes you must first set up a local Vite + Tailwind development environment. See the Tailwind Config page for the example config.
1

Update the @import URL

In your source CSS file, replace the relevant family= parameter in the Google Fonts @import URL with your new font name. Use the Google Fonts site to find the correct URL format, including any weight or style variants you need.
2

Update the Tailwind fontFamily config

In tailwind.config.js, update the fontFamily extension to point to the new family name:
// tailwind.config.js (example — not present in the repo)
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'comic':   ['Comic Neue', 'cursive', 'sans-serif'],
        'vt323':   ['VT323', 'monospace'],
        'courier': ['Courier Prime', 'monospace'],
      },
    },
  },
};
Replace the array values for whichever class you are changing.
3

Update the body default (if changing Comic Neue)

If you are replacing Comic Neue, also update the font-family value in the body rule in your source CSS to match the new font name.
4

Rebuild

Run npm run build to recompile assets/main.css and assets/main.js with the updated font configuration.

​
Font Fallbacks

Each Tailwind font class includes a fallback stack to ensure readable text even if the Google Fonts request fails or is blocked:
ClassPrimaryFallback
font-comicComic Neuecursive, sans-serif
font-vt323VT323monospace
font-courierCourier Primemonospace
The cursive fallback for Comic Neue is intentional — if the font cannot load, a system cursive (such as Comic Sans on Windows) maintains the playful handwritten feel that Comic Neue normally provides.
Pair font-vt323 with tracking-widest for the most authentic retro terminal heading look. The VT323 glyphs are tight by design, and the extra letter-spacing brings them closer to the wide-spaced pixel fonts seen on actual CRT terminals and early DOS UIs.
<h2 className="font-vt323 tracking-widest text-3xl text-retro-purple">
  SKILLS.EXE
</h2>

Build docs developers (and LLMs) love

Get started for freeTalk to us