DEDUPED Hot AI repos, turned into use cases Get the Monday 5

How to add a handwritten theme to a website with Harshpreet Hand

Serve the font and turn on a handwritten theme for headings and prose on any site.

  • Top pick
  • Content
  • Intermediate
  • 15 minutes
  • From the README
  • Any agent

Who it is forA web builder or blogger who wants a personal, hand-drawn look for headings and articles without loading an image-based design.

The problemMost web fonts look generic, and a custom handwritten look usually needs a designer or a costly font license.

The outcomeThe site renders its prose in the Harshpreet Hand font through a data-theme switch, with code and dense UI kept in normal fonts.

What you need first

  • A web browser, or a computer where you can install .ttf font files
  • For rebuilding: Python 3, potrace (brew install potrace or apt install potrace), and a terminal
  • For a site: access to the site's CSS and a folder to host font files

Steps

  1. Download the repo or the dist/ folder, then copy dist/HarshpreetHand-Regular.woff2 (and optionally -Bold.woff2) into your site, e.g. public/fonts/.
  2. Copy dist/harshpreet-hand.css next to the fonts, or paste its @font-face rules into your global CSS, and fix the url() paths if needed.
  3. Turn the theme on with document.documentElement.dataset.theme = "handwritten".
  4. Set line-height to 1.5 or more so the g and y loops do not clip, as the README advises.
  5. Open the page in a browser and confirm the headings and prose render in the handwritten face.

Prompt for your agent

Using the repo harshpreet931/harshpreet-hand, copy the .woff2 fonts and harshpreet-hand.css from dist/ into <site-folder>/public/fonts/, then apply the handwritten theme to <page-or-layout-file>. Output the changed files and the exact <html> change. Verify by loading the page and confirming the Harshpreet Hand font is requested and applied in the browser developer tools.

Caveat. Keep the font for headings and prose only, since the README says code, tables and dense UI should stay in normal fonts.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for harshpreet931/harshpreet-hand and "Add a handwritten theme to a website"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer