Fonts and Styling — Typefaces and Per-Invitation CSS

Typography is the primary way invitations express personality. This platform uses a combination of Google Fonts (loaded via next/font/google for zero-layout-shift performance) and locally hosted decorative typefaces (loaded via next/font/local) stored in public/fonts/. All font instances are defined once in components/Fonts.ts and imported by whichever section components need them.

Google Fonts

Use next/font/google to load any font from the Google Fonts catalog. Each font is instantiated with the subsets and weight options that match how it will be used. Named exports from Fonts.ts give each font instance a clear alias.

// src/app/quinces/daniela/components/Fonts.ts
import {
  Great_Vibes,
  Playfair_Display,
  Pinyon_Script,
  Noto_Serif_Balinese,
  Roboto,
  Titillium_Web,
  Oswald,
  Clicker_Script,
  Aref_Ruqaa,
  Rajdhani,
  Yeseva_One,
} from "next/font/google";

// Decorative script fonts
export const greatVibes = Great_Vibes({ subsets: ["latin"], weight: "400" });
export const pinyion = Pinyon_Script({ subsets: ["latin"], weight: ["400"] });
export const clicker = Clicker_Script({ subsets: ["latin"], weight: "400" });

// Serif display fonts
export const playFair = Playfair_Display({
  subsets: ["latin"],
  weight: ["400", "600", "700"],
});
export const notoSerif = Noto_Serif_Balinese({
  subsets: ["latin"],
  weight: ["400"],
});
export const aref = Aref_Ruqaa({ subsets: ["latin"], weight: "400" });
export const yaseva = Yeseva_One({ subsets: ["latin"], weight: "400" });

// Body / UI fonts
export const roboto = Roboto({ subsets: ["latin"], weight: ["400"] });
export const notoSans = Titillium_Web({ subsets: ["latin"], weight: "400" });
export const oswald = Oswald({ subsets: ["latin"], weight: "400" });
export const rajdhani = Rajdhani({ subsets: ["latin"], weight: "400" });

You do not need to use every font you declare — just import the ones you actually use in a given component. Unused exports are tree-shaken at build time. Common Google Font pairings used across invitations:

Role	Font
Celebrant name (large)	`Pinyon_Script`, `Great_Vibes`, `Clicker_Script`
Section headings	`Playfair_Display`, `Yeseva_One`
Date / event details	`Aref_Ruqaa`, `Oswald`
Addresses / body text	`Rajdhani`, `Titillium_Web`, `Roboto`

Local Fonts

The public/fonts/ directory contains a curated set of decorative .otf and .ttf files available to all invitations. Load them using next/font/local:

// src/app/quinces/[name]/components/Fonts.ts
import localFont from "next/font/local";

export const blacksword = localFont({
  src: "../../../../public/fonts/Blacksword.otf",
  display: "swap",
});

export const brittany = localFont({
  src: "../../../../public/fonts/BrittanySignature.ttf",
  display: "swap",
});

export const harryPotter = localFont({
  src: "../../../../public/fonts/HARRYP__.TTF",
  display: "swap",
});

export const harryPotterAlt = localFont({
  src: "../../../../public/fonts/HarryPotter-ov4z.ttf",
  display: "swap",
});

The full list of available fonts in public/fonts/:

Blacksword

Blacksword.otf — bold gothic blackletter, ideal for dramatic headings.

BrittanySignature

BrittanySignature.ttf — flowing handwritten signature style.

Cheeky

Cheeky.ttf — playful rounded script.

Chomsky

Chomsky.otf — classic newspaper masthead blackletter.

HARRYP__

HARRYP__.TTF — Harry Potter–style lightning bolt letterforms.

HarryPotter-ov4z

HarryPotter-ov4z.ttf — alternate Harry Potter–inspired display font.

HighriseFont

HighriseFont.otf — tall condensed display font.

Machinery

Machinery.otf — industrial stencil-style uppercase.

Olondona

Olondona.otf — elegant thin-stroke calligraphy.

Rumble

Rumble.otf — rough hand-drawn energy.

VerveAlternate

VerveAlternate.ttf — retro art-deco display.

adelia

adelia.ttf — delicate thin calligraphy script.

candlescript

candlescript.otf — romantic candle-style cursive.

mexican_city

mexican_city.otf — decorative Mexican-inspired display.

Applying Fonts

Apply a font to a React element by spreading its .className property into the element’s className string. Use template literals to combine it with Tailwind utility classes:

import { pinyion, playFair, rajdhani } from "./Fonts";

// Celebrant name — large decorative script
<motion.p className={`${pinyion.className} text-7xl text-yellow-400`}>
  Daniela
</motion.p>

// Section heading — serif display
<motion.h1 className={`${playFair.className} text-2xl text-zinc-600`}>
  MIS XV AÑOS
</motion.h1>

// Street address — readable body font
<motion.p className={`${rajdhani.className} text-sm text-center`}>
  Juan de La Luz Enríquez s/n, Centro, 91000 Xalapa-Enríquez, Ver.
</motion.p>

Each next/font instance handles CSS variable injection automatically — you never need to load <link> tags or configure @font-face rules manually.

Tailwind CSS

The project uses Tailwind CSS v3 configured in tailwind.config.ts. The content array covers all source files and the component libraries:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import { nextui } from "@nextui-org/react";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    "./node_modules/flowbite-react/**/*.js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui(), require("flowbite/plugin")],
};

export default config;

Two UI component libraries are included as Tailwind plugins:

NextUI (@nextui-org/react) — used for Button, Modal, Card, Avatar, and useDisclosure. Import components directly from @nextui-org/react.
Flowbite (flowbite-react) — used for the Carousel component in GodParents. Import from flowbite-react.

Both libraries require their respective packages in the Tailwind content array and as plugins entries, otherwise their utility classes will be purged in production builds.

Per-invitation CSS

Each invitation has an optional styles.css file in its route directory. This file is imported at the top of page.tsx and is the correct place for:

A background-color or background-image pattern for the outer <main> wrapper.
Custom Splide pagination dot styles.
Any one-off animation keyframes or CSS variables specific to this invitation.

/* src/app/quinces/daniela/styles.css */

/* Gradient checkerboard background for the page wrapper */
.background-class {
  background-color: #E3A008;
  background-image: url("data:image/svg+xml,...");
  background-attachment: fixed;
  background-size: cover;
  height: 100svh;
}

/* Active Splide pagination dot */
.custom-class-page.is-active {
  background: #fff !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,
              rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

/* Inactive Splide pagination dot */
.custom-class-page {
  background: #9e9e9e !important;
}

Import it in page.tsx:

// src/app/quinces/[name]/page.tsx
import "./styles.css";

The class .background-class is applied to the <main> element in page.tsx. The .custom-class-page selector targets the Splide pagination buttons through the classes.page option passed to the <Splide> component in Main.tsx.

Add decorative text shadow to script fonts using an inline style prop — this is faster than writing a custom CSS utility:

<motion.p
  className={`${pinyion.className} text-7xl text-yellow-400`}
  style={{ textShadow: "0px 1px 1px rgba(255,255,255, 1)" }}
>
  Daniela
</motion.p>

You can also define reusable shadow values as CSS custom properties in styles.css (e.g. --text-glow: 0 0 8px rgba(255,215,0,0.8)) and reference them via style={{ textShadow: "var(--text-glow)" }}.

Building Invitations

Configuration & Deployment

Fonts and Styling — Typefaces and Per-Invitation CSS

Google Fonts

Local Fonts

Blacksword

BrittanySignature

Cheeky

Chomsky

HARRYP__

HarryPotter-ov4z

HighriseFont

Machinery

Olondona

Rumble

VerveAlternate

adelia

candlescript

mexican_city

Applying Fonts

Tailwind CSS

Per-invitation CSS

Build docs developers (and LLMs) love

Building Invitations

Configuration & Deployment

Documentation Index

​Google Fonts

​Local Fonts

Blacksword

BrittanySignature

Cheeky

Chomsky

HARRYP__

HarryPotter-ov4z

HighriseFont

Machinery

Olondona

Rumble

VerveAlternate

adelia

candlescript

mexican_city

​Applying Fonts

​Tailwind CSS

​Per-invitation CSS

Build docs developers (and LLMs) love

Google Fonts

Local Fonts

Applying Fonts

Tailwind CSS

Per-invitation CSS