Skip to main content

Documentation Index

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

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

Typography in Spooky Developer does double duty: it sets the Halloween mood and keeps the interface readable. The solution is a deliberate two-font system — Creepster for everything that needs dramatic personality, and Inter for everything that needs to be read. Both fonts arrive from a single Google Fonts @import at the top of main.css, so there’s no additional build step or font-loading configuration to worry about.

​
Font Loading

Both typefaces are loaded together via a single Google Fonts URL embedded at the top of main.css:
main.css
@import "https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@300;400;500;600;700&display=swap";
The display=swap parameter ensures text renders immediately in a fallback font while the custom fonts load, avoiding invisible text on slow connections. The five Inter weights — 300, 400, 500, 600, and 700 — cover every weight used across body copy, labels, and UI chrome.

​
Creepster — The Spooky Font

Creepster is a free Google Fonts display typeface in the horror genre: irregular letterforms with sharp angles and a hand-painted quality that reads as delightfully sinister without sacrificing legibility.
PropertyValue
FamilyCreepster
Stylecursive (CSS generic fallback)
Letter spacing0.05em
Tailwind classfont-spooky
Weight loadedRegular (400 only)

​
Global h1–h6 Default

main.css applies Creepster globally to all heading elements, so every <h1> through <h6> in the app inherits the spooky font without an explicit class:
main.css
h1, h2, h3, h4, h5, h6 {
  font-family: Creepster, cursive;
  letter-spacing: 0.05em;
}

​
Tailwind Utility Class

Use font-spooky to apply Creepster to any element — useful for non-heading elements like nav labels, tombstone epitaphs, and form labels that need the display treatment: 
<h1 className="font-spooky text-5xl text-haunt-moon">
  Graveyard Tour
</h1>

{/* Non-heading element styled as a heading */}
<span className="font-spooky text-3xl text-haunt-pumpkin">
  2022 – Present
</span>

​
Where Creepster Is Used

  • Navigation bar — section labels (About, Projects, Skills, etc.)
  • Page headings — all <h1> page titles (Graveyard Tour, Trick or Treat?, The Candy Bowl, etc.)
  • Timeline years — the pumpkin-colored year labels on the About page timeline
  • Tombstone inscriptions — the RIP watermark and door labels on the Projects page
  • Work page companies — employer names styled with font-spooky text-haunt-pumpkin
  • Form labels — the Séance (contact) form field labels

​
Inter — The Body Font

Inter is a highly legible variable-width sans-serif designed specifically for screen interfaces. It sits in comfortable contrast with Creepster: where Creepster performs, Inter informs.
PropertyValue
FamilyInter
Stylesans-serif (CSS generic fallback)
Weights loaded300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
Tailwind classfont-body
Global body defaultYes — set on body in main.css

​
Global Body Default

main.css sets Inter as the default font for the entire <body>, so every element that doesn’t override the font family inherits it automatically:
main.css
body {
  font-family: Inter, sans-serif;
  color: rgb(254 243 199); /* haunt-bone */
}

​
Tailwind Utility Class

Use font-body to explicitly reassert Inter on elements nested inside a Creepster-styled heading, or to be explicit in components: 
{/* Body text */}
<p className="font-body text-haunt-bone/80 leading-relaxed">
  I write code that doesn't haunt your codebase. Usually.
</p>

{/* Subtitle below a spooky heading */}
<h1 className="font-spooky text-5xl text-haunt-moon">Graveyard Tour</h1>
<p className="font-body text-xl text-haunt-bone/70 mt-4 max-w-2xl mx-auto">
  A timeline of my career, lovingly rendered in tombstone form.
</p>

​
Where Inter Is Used

  • Page body copy — all descriptive paragraphs and subtitles
  • Skills page descriptions — candy tooltip labels use the body font for readability
  • Work page card details — role descriptions and date ranges
  • Case study cards — summary text and “Read the full scroll” links
  • Contact form — input placeholders and helper text

​
Using Both Fonts Together

The most common pattern in Spooky Developer is a font-spooky heading immediately followed by font-body supporting text: 
{/* Home page hero */}
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
  <h1 className="text-6xl md:text-8xl text-haunt-moon mb-4">
    Spooky Dev
  </h1>
  <p className="text-xl md:text-2xl text-haunt-bone/80 font-body max-w-2xl mx-auto">
    I write code that doesn't haunt your codebase. Usually.
  </p>
</motion.div>

{/* Timeline entry */}
<h2 className="text-haunt-pumpkin font-spooky text-3xl mb-2 mt-8">
  2020
</h2>
<h3 className="text-haunt-moon text-xl font-bold mb-4">
  Master of React
</h3>
<p className="text-haunt-bone/80 leading-relaxed">
  Learned to control the state, though sometimes it still controls me.
</p>
h3, h4, h5, and h6 inherit font-family: Creepster from the global rule in main.css, but they will still obey weight utilities like font-bold from Tailwind — Creepster only ships in one weight, so font-bold has no visible effect on headings. It does affect Inter elements as expected.

​
Swapping the Spooky Font

To replace Creepster with another horror-genre Google Font — such as Nosifer, Eater, or Henny Penny — update two things:1. The @import URL in main.css:
/* Before */
@import "https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@300;400;500;600;700&display=swap";

/* After — swap in Nosifer */
@import "https://fonts.googleapis.com/css2?family=Nosifer&family=Inter:wght@300;400;500;600;700&display=swap";
2. The fontFamily.spooky key in tailwind.config.js (source builds only):
theme: {
  extend: {
    fontFamily: {
      spooky: ['Nosifer', 'cursive'],
      body:   ['Inter', 'sans-serif'],
    },
  },
},
The global h1–h6 rule in main.css also hardcodes font-family: Creepster, cursive, so update that line too to keep heading styles in sync with the Tailwind class.
Note: The deployed site is a pre-built Vite output with no tailwind.config.js. The config change above applies when building from the original source. In either case, the main.css @import and h1–h6 rule edits are always required.

Build docs developers (and LLMs) love

Get started for freeTalk to us