Best fonts for vibe-coded apps (12 free pairings that aren't Inter)

Free Google Fonts pairings that make Lovable, Bolt, v0 and Cursor apps look designed, with what each suits and the exact prompt to install them.

Updated 2026-10-15 · 4 min read · by the Unslop Me team

Typography is the cheapest way to make an AI-built app look designed, and the most overlooked. In our scans, "Inter / system font only" is one of the most common tells on the Slop Leaderboard. The fix is a single prompt.

The rule of thumb: one face with character for headings, one quiet face for text. Here are twelve free pairings we'd actually ship, grouped by the kind of product they suit.

Editorial and warm

These suit consumer apps, content tools, anything where you want to feel human.

1. Fraunces + Inter Tight. Fraunces is a soft, slightly wonky serif with an optical size axis, so it looks right at 96px and at 24px. Inter Tight keeps the familiarity of Inter with tighter spacing. (This site uses it.)
2. Instrument Serif + Inter. Instrument Serif is elegant and condensed, and only comes in one weight, so use it big. It's perfect for a single dramatic headline.
3. Newsreader + Manrope. A text-optimised serif with real italics, over a friendly geometric sans. Good for long reading.
4. DM Serif Display + Work Sans. High contrast and confident. Works for studios, portfolios and creative tools.

Technical and precise

For dev tools, data products, APIs and anything with "agent" in the name.

5. Space Grotesk + IBM Plex Mono. Grotesk headings with quirky details, mono body text for a terminal feel. Use the mono for UI labels too.
6. JetBrains Mono + Inter. Mono headings at large sizes look deliberate. Keep body in Inter for readability.
7. Bricolage Grotesque + IBM Plex Sans. Bricolage has a variable width axis and lots of personality at display sizes; Plex is calm underneath.
8. Archivo + Archivo Narrow. One family, two widths. Compact and industrial, good for dashboards.

Calm and trustworthy

For finance, health, legal, B2B.

9. Instrument Serif + IBM Plex Sans. Serif authority with an engineered, slightly corporate text face. Our default for finance tools.
10. Source Serif 4 + Source Sans 3. A matched pair designed together. Very hard to get wrong.
11. Literata + Figtree. A warm book serif with a friendly sans. Good for health and wellbeing.
12. Libre Caslon Text + Karla. Classic and slightly old-fashioned, in a good way. Suits legal, editorial and premium products.

How to install a pairing (any builder)

Lovable, Bolt and most Vite projects:

Add Google Fonts: "Fraunces" (opsz 9..144, weights 400, 700, 800, plus italic 400) and "Inter Tight" (400, 500, 600) via a <link> in index.html.
Set the Tailwind theme fontFamily: display = ['Fraunces', 'Georgia', 'serif'], sans = ['Inter Tight', 'system-ui', 'sans-serif'].
Use font-display for h1, h2, h3 and the logo. Everything else uses font-sans. Remove Inter.

v0 / Next.js:

In app/layout.tsx load Fraunces and Inter Tight with next/font/google as CSS variables --font-display and --font-sans, apply both on <html>, and use them in globals.css (headings: display, body: sans). Remove Geist.

Make the fonts do work

Installing a font isn't enough. These settings are what make it look intentional:

• Big contrast. Hero headline at 3.5 to 5 times your body size. A 17px body suggests a 64-88px headline on desktop.
• Tight display leading. line-height: 0.95 to 1.05 for big headings. Default 1.5 leading on a 72px headline looks broken.
• Negative tracking on display sizes. letter-spacing: -0.02em to -0.035em.
• Use italics. One italic word in the accent colour gives a headline a voice. Serif italics are much more distinctive than sans italics.
• Monospace for small labels. Uppercase 11-12px mono with wide tracking makes kicker labels and metadata feel designed.

Fonts to think twice about

These aren't bad, but they're so common in generated apps that they no longer read as a choice: Inter alone, Geist, Poppins, Plus Jakarta Sans, DM Sans, Manrope alone, Outfit, Sora. If you love one of them, keep it for body text and add a display face.

A worked example

Say you've built a booking tool for yoga studios in Lovable and it's Inter everywhere. Here's how we'd choose:

1. Name the feeling in two words. "Calm, warm." Not "modern", because everything is modern.
2. Pick the group. Calm and warm sits between the editorial and trustworthy groups above, so Literata + Figtree or Fraunces + Inter Tight are good candidates.
3. Test with your real headline. Type "Class booking for small yoga studios" in both pairings at 72px. Fraunces feels friendlier; Literata feels more bookish. Go with Fraunces.
4. Set the weights. Headline in Fraunces 600 rather than 800, because calm doesn't shout. One italic word, "small", in the accent colour.
5. Keep the UI in the text face. Buttons, form labels, nav and tables all use Inter Tight. Display faces in small UI text are the most common way a good pairing goes wrong.

Total time: about fifteen minutes, one prompt, and the site no longer looks like the other 400 booking tools built that week.

Common mistakes

• Loading too many weights. Each weight is a download. Two or three per family is plenty.
• Display face in body text. Serifs with personality get tiring in paragraphs. Keep them for headings.
• Forgetting the fallback. Always end the stack with a generic family (serif, sans-serif) so the page doesn't flash Times New Roman.
• Mixing two characterful faces. Two personalities fight. One loud, one quiet.

Check it

After you switch fonts, scan your site. If more than about 90% of your text is still in a default sans, the scanner will flag it, which usually means a component library is overriding your heading font. The v0 design system prompts and Cursor rules guides show how to make the change stick, and colour palettes that don't look AI is the natural next step.

FAQ