Skip to main content

Documentation Index

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

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

Typography is central to The Craft’s identity as a wizard’s grimoire. The three typefaces — a commanding serif for headings, an elegant book face for body copy, and a flowing cursive for decorative flourishes — work together to evoke the atmosphere of an ancient, hand-illuminated manuscript. All three fonts are loaded from Google Fonts via a single @import rule at the very top of assets/main.css, and their roles are enforced through both global element rules and named Tailwind utility classes.

​
Google Fonts Import

The following import is the first line of assets/main.css. It loads all three families in a single optimized request using the display=swap strategy, which ensures text remains visible in system fonts while the custom fonts download. 
@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Pinyon+Script&display=swap";

​
Typeface Reference

FamilyCSS utility classWeights loadedPrimary role
Cinzelfont-cinzel400, 600, 700Page titles, section headings, nav labels, buttons
EB Garamondfont-garamond400, 600, italic 400Body text, project descriptions, captions
Pinyon Scriptfont-cursive400Decorative cursive — dates, subtitles, ornamental labels
The font-cursive class name in Tailwind maps to font-family: Pinyon Script, cursive — it does not refer to the generic CSS cursive keyword family. This is a custom utility defined in main.css under .font-cursive.

​
Global Font Assignments

Rather than relying solely on utility classes, The Craft establishes sitewide defaults directly in main.css so that every element inherits the correct typeface without needing an explicit class.

​
Body

body {
  background-color: #0a0d14;
  color: #e8dcc4;
  font-family: EB Garamond, serif;
  overflow-x: hidden;
  cursor: crosshair;
}
EB Garamond is set as the default body font. Any element that does not override font-family will inherit this elegant old-style serif.

​
Headings

h1, h2, h3, h4, h5, h6 {
  font-family: Cinzel, serif;
}
All six heading levels are globally assigned to Cinzel. This means the heading hierarchy is typographically consistent without any additional class work in components.

​
Cursive Utility

.font-cursive {
  font-family: Pinyon Script, cursive;
}
Pinyon Script is never used as a global default — it is always applied intentionally via the .font-cursive class on individual decorative elements like date labels in the work history timeline or subtitle flourishes on the hero section.

​
Scrollbar Styling

The Craft also applies custom scrollbar styles that keep the browser’s native scrollbar visually consistent with the dark theme. These rules use the ::-webkit-scrollbar pseudo-elements and are supported in Chrome, Edge, and Safari. 
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0a0d14; /* midnight */
}

::-webkit-scrollbar-thumb {
  background: #14b8a6; /* muted teal */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5eead4; /* lighter teal on hover */
}
The scrollbar is intentionally narrow at 6px to keep it unobtrusive. The thumb uses a slightly muted teal (#14b8a6) rather than the full spell accent (#2dd4bf), so it doesn’t compete with glowing interactive elements.
Firefox does not support ::-webkit-scrollbar pseudo-elements. On Firefox the scrollbar will use the browser default styling. The no-scrollbar utility class (also defined in main.css) is used on specific overflow containers where any scrollbar is unwanted.

​
Swapping Fonts

To replace one or more of the three typefaces, follow these steps:
1

Choose your replacement fonts

Visit fonts.google.com and select your alternatives. Make sure you select the same weights that the originals use — Cinzel at 400/600/700, EB Garamond at 400/600 plus italic 400, and Pinyon Script at 400.
2

Build a new @import URL

Use Google Fonts’ “Get embed code” interface to generate a combined URL for all the families you want. Copy the @import URL (not the <link> tag version).
3

Replace the @import line in main.css

Open assets/main.css and replace the existing @import line at the very top of the file with your new URL.
4

Update the font-family references

In the body rule, update font-family: EB Garamond, serif to your new body font name. In the h1–h6 rule, update font-family: Cinzel, serif. In the .font-cursive class, update font-family: Pinyon Script, cursive.
5

Update Tailwind class names (optional)

The utility classes font-cinzel, font-garamond, and font-cursive are referenced throughout component JSX. If you want the class names to reflect your new fonts, do a find-and-replace across your source files — though the classes will still work correctly even with the old names.
Cinzel substitutes: If you want to preserve the medieval atmosphere but try a different display serif, both Cormorant Garamond (available on Google Fonts) and Playfair Display maintain an elegant, historical quality. Cormorant Garamond is especially close in spirit — it pairs beautifully with EB Garamond for body text and has a distinctly manuscript-like character.EB Garamond substitutes: Libre Baskerville or Crimson Pro are strong alternatives that retain readability at small sizes while keeping the old-style serif character.

Build docs developers (and LLMs) love

Get started for freeTalk to us