Keep Inter for the text, choose the heading font.

The most common signal in the study

In the November study, covering 509 sites that people measured under the same version of the rules, The usual typeface showed up on 290. No other signal comes close.

What makes it useful is how it splits the groups: it's on 55 of the 63 sites that scored 55 or more, and on 41 of the 167 that scored under 15. That's almost nine in ten of the sloppiest, and one in four of the most careful. Plenty of careful sites use Inter. What they rarely do is use it for everything.

What counts as a choice

The Slop Score looks at which font sets most of the text. If it's one of AI's defaults (Inter, Geist, system-ui, plus a second tier with Plus Jakarta Sans, Poppins, DM Sans, Manrope, Space Grotesk or Outfit) and the headings use the same one, the signal fires.

If H1 or H2 use a different face someone picked, it reads as a pairing and the signal weighs far less. Not every face counts as picked, though:

• Reflex serifs don't count: Playfair Display, Fraunces, Instrument Serif, Cormorant, DM Serif, Lora and friends are what AI grabs when you ask for elegant. Add a cream background and the Slop Score flags Tasteful slop, cream and a serif on top.
• The usual monospace faces don't either: JetBrains Mono, Space Mono or Geist Mono in headings isn't a decision, just a different template.
• One new font is enough: no need for a third or a fourth. Two families, one for headings and one for text, will do.

CSS you can paste

Download the font under its license, add it to your project (say, public/fonts/) and load it with @font-face. With font-display: swap, as MDN describes it, the browser shows a fallback right away and switches to your font once it loads, so the heading is never invisible.

:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-headings: "Your Font", var(--font-body);
}

@font-face {
  font-family: "Your Font";
  src: url("/fonts/your-font.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

body { font-family: var(--font-body); }

h1, h2 {
  font-family: var(--font-headings);
  font-weight: 500;
  letter-spacing: -0.02em;
}

Leave H3 and below in the body face. Move everything to the new font and you're back to a single typeface, just a different one. Size helps the choice show, too: the clamp() for that is in a headline that owns the page.

How to ask the AI for it

In Lovable, v0, Bolt or Cursor, the request has to say which font, where, and what to leave alone. Leave any of that out and the model picks for you, from the list above.

Change only the heading typeface.
- H1 and H2 in "[font name]", loaded with @font-face from
  /fonts/[file].woff2 with font-display: swap.
- All other text stays in the current font. Don't touch H3,
  buttons or forms.
- Don't use Playfair, Fraunces, Instrument Serif, Cormorant or Space
  Grotesk, even if you think they'd look better.
- Define both fonts as CSS variables (--font-headings and
  --font-body) and use those, not one-off classes.

A fuller brief, with colors and spacing, lives in the prompt guide.

Check that it worked

Run your site through the Slop Score before and after the change. The signal may still show up, but with much less weight. If it weighs the same as before, make sure the new font actually loads (the file exists at that path) and that it isn't one of the reflex serifs.