Back to MakeFont
Guides
Practical guides for people who build with AI tools: typography, web fonts and making a site look like your own.
Headline set in MakeFont Sans 01, a typeface made with MakeFont.
Each guide works on its own, with or without MakeFont.
- 01How to self-host web fonts instead of loading them from Google FontsServe web fonts from your own server instead of Google Fonts: get WOFF2 files, declare them with @font-face, preload, cache, and set them up in Tailwind and Next.js. With a prompt for your agent.Read the guide
- 02Why AI-built websites all look the same, and how to make yours stand outWhy sites from Claude Code, Lovable, v0 and Bolt look generic: shared components, default fonts, the same layouts. How to fix it with typography, a type scale and a design brief for your agent.Read the guide
- 03Design skills for coding agents: how to get better UIs from Claude Code and CodexGet better UI design from Claude Code and Codex: write a design skill (SKILL.md), put design rules in CLAUDE.md or AGENTS.md, define design tokens and let the agent check screenshots.Read the guide
- 04Web typography checklist: font size, line height and type scale for sites you build with AIA practical web typography checklist: type scale, fluid font sizes with clamp(), line length, line height, contrast and text-wrap, with CSS and Tailwind examples and a prompt for your agent.Read the guide
- 05Font pairing for websites: how to combine fonts without a designerHow to pair fonts for a website: how many to use, serif and sans serif, x-height, roles, eight proven free Google Font pairings, CSS and Tailwind code, and a prompt for your agent.Read the guide
- 06How to use a custom font in Lovable, v0 and BoltAdd your own font files (WOFF2) to a Lovable, v0 or Bolt project: where the files go, @font-face or next/font/local, Tailwind v3 and v4 setup, prompts that work, and how to check it.Read the guide
- 07Font licensing explained: can you use this font on your website or app?Font licenses for websites and apps in plain words: SIL Open Font License, Apache 2.0, Google Fonts commercial use, webfont licenses, SF Pro, Adobe Fonts. With a checklist and an agent prompt.Read the guide
New to MakeFont? Start with What is MakeFont.