Skip to main content

Documentation Index

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

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

Spooky uses two Google Fonts loaded via @import at the top of assets/main.css: Creepster, a decorative spooky display font used for headings and titles, and Special Elite, a vintage typewriter-style serif used for body copy and navigation labels. Inter is included as a weighted fallback sans-serif for any elements that do not inherit either custom font class. Together, the two custom fonts are the primary contributors to the theme’s unsettling, atmospheric tone.

​
Font import

Both fonts, along with Inter at three weights, are loaded in a single Google Fonts request at the very top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@400;500;600&family=Special+Elite&display=swap";
The display=swap parameter is included in the Google Fonts URL. This instructs the browser to render text using a system fallback font immediately while the custom fonts download in the background, preventing invisible text and minimizing layout shift during the initial page load.

​
Tailwind font utilities

Two custom font-family utility classes are defined inside assets/main.css using Tailwind’s component layer, making them available as drop-in class names anywhere in the theme: .font-spooky — applies Creepster with a system-ui fallback chain. Used for page headings, the navigation site title, section labels, and all decorative display text: 
.font-spooky {
  font-family: Creepster, system-ui, sans-serif;
}
.font-typewriter — applies Special Elite with a monospace fallback chain. Used for body copy paragraphs, navigation link labels, and UI control labels: 
.font-typewriter {
  font-family: Special Elite, monospace;
}
ClassFont FamilyFallbackUsage
font-spookyCreepstersystem-ui, sans-serifHeadings, titles, decorative text
font-typewriterSpecial ElitemonospaceBody copy, nav links, labels

​
Applying fonts

Both classes are applied directly on HTML elements alongside other Tailwind utilities. The following examples show typical usage from the theme’s component files: 
<!-- Spooky display heading with letter spacing -->
<span class="font-spooky text-xl tracking-wider">Directory</span>

<!-- Typewriter body copy with atmospheric intro text -->
<p class="font-typewriter">Tread carefully...</p>
For decorative headings, font-spooky is commonly paired with tracking-wider or tracking-widest and text-glow-pumpkin to produce the theme’s signature lit-text effect. For body copy, font-typewriter is typically paired with leading-relaxed for comfortable reading.

​
Changing fonts

To swap either custom font for a different Google Font:
  1. Update the @import URL in assets/main.css to include your new font family. Remove the old family name from the query string and add the new one with any required weight parameters.
  2. Update the font-family value for .font-spooky or .font-typewriter (or both) in assets/main.css to reference the new family name.
  3. If you are working from the original source repository, rebuild the project with Vite so the changes are compiled into the output files. If you are editing the theme directly without a build step, apply the changes to the minified assets/main.css in place.
After changing fonts, check that heading sizes, letter-spacing values, and line-height settings still look correct — different typefaces have different natural metrics and may require small adjustments to the accompanying Tailwind utility classes.

Build docs developers (and LLMs) love

Get started for freeTalk to us