*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #c9a84c; --gold-lt: #e8c97a; --black: #080808; --black-2: #0e0e0e; --white: #f5f0e8; --white-dim: rgba(245,240,232,0.55); --white-mute: rgba(245,240,232,0.28); } body { font-family: 'Montserrat', sans-serif; background: var(--black-2); color: var(--white); min-height: 100vh; padding-bottom: 80px; } nav { display: flex; align-items: center; justify-content: space-between; padding: 0 56px; height: 72px; background: rgba(8,8,8,0.9); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(201,168,76,0.12); position: sticky; top: 0; z-index: 100; } .nav-logo { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 30px; font-weight: 400; color: var(--gold); letter-spacing: 2px; text-decoration: none; text-shadow: 0 0 30px rgba(201,168,76,0.3); } .content { max-width: 560px; margin: 0 auto; padding: 72px 24px 0; } .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; opacity: 0.8; } h1 { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.05; color: var(--white); margin-bottom: 14px; } h1 em { font-style: italic; color: var(--gold); } .subtitle { font-size: 13px; color: var(--white-dim); font-weight: 300; line-height: 1.8; margin-bottom: 52px; letter-spacing: 0.03em; } .steps { display: flex; flex-direction: column; } .step { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid rgba(201,168,76,0.08); animation: fadeUp 0.5s ease both; } .step:last-child { border-bottom: none; } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .step:nth-child(1){animation-delay:.05s} .step:nth-child(2){animation-delay:.10s} .step:nth-child(3){animation-delay:.15s} .step:nth-child(4){animation-delay:.20s} .step:nth-child(5){animation-delay:.25s} .step:nth-child(6){animation-delay:.30s} .step-num { flex-shrink: 0; width: 36px; height: 36px; border: 1px solid rgba(201,168,76,0.3); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; color: var(--gold); margin-top: 2px; } .step-body h3 { font-size: 14px; font-weight: 500; color: var(--white); margin-bottom: 6px; letter-spacing: 0.05em; } .step-body p { font-size: 12px; color: var(--white-dim); line-height: 1.75; font-weight: 300; letter-spacing: 0.02em; } .step-body a { color: var(--gold); text-decoration: underline; } .note { margin-top: 44px; background: rgba(201,168,76,0.04); border: 1px solid rgba(201,168,76,0.18); border-radius: 3px; padding: 18px 22px; font-size: 12px; color: var(--white-dim); line-height: 1.7; letter-spacing: 0.02em; } .note strong { color: var(--gold); font-weight: 500; } .back { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 11px; color: rgba(201,168,76,0.6); text-decoration: none; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.2s, gap 0.2s; } .back:hover { color: var(--gold); gap: 14px; } @media (max-width: 480px) { nav { padding: 0 20px; } h1 { font-size: 38px; } }
Guide

Your own
handwriting

Turn your real pen strokes into a font — then render every note in your own hand, at any scale.

1

Build your handwriting font

Go to notifyfontbuilder.netlify.app. Runs entirely in your browser — no account needed.

2

Open the Draw Zone

You'll see a grid with a box for each character, with guide lines for baseline and cap height.

3

Draw every character

Use a stylus or mouse to draw each letter, number, and symbol. Take your time — this becomes your font.

4

Download the .ttf file

Once satisfied, export the font as a .ttf file to your device.

5

Upload it to Notify

Select My Handwriting from the style dropdown. The upload panel will appear — drop your .ttf in.

6

Render your notebook

Upload your document, keep My Handwriting selected, and hit Render Notebook. Done.

One custom style at a time. Uploading a new .ttf permanently replaces the previous one. Sign in to save multiple fonts to your account.
← Back to renderer