DEV Community

Muhammad Afsar Khan
Muhammad Afsar Khan

Posted on

How I Curated 100+ Google Font Pairings & Built a Live Preview Tool....

#webdev #javascript #css #design

Here's the thing: I'm terrible at picking fonts.

Every time I started a project, I'd spend hours scrolling through Google Fonts, opening 20 tabs, trying to decide if Montserrat goes with Open Sans or if I should just give up and use Arial again.
I knew I wasn't alone. Every designer I talked to had the same problem.
So I built something simple: a page with 100+ font combinations that actually work, where you can type your own text and see it instantly.

The Problem With Every Other Font Site

Most font pairing websites show you pretty pictures of "Sample Text" with some made-up headline. But when I paste in my actual content — my product name, my blog title — it never looks as good.
I wanted to see my words, in those fonts, right now.

How I Built It

I started by just listing out font pairs I actually use. Playfair Display + Lato for blog posts. Inter + Roboto for dashboards. The classics that never fail.
Then I turned that list into JavaScript:

javascript
const pairings = [
  {
    heading: 'Playfair Display',
    body: 'Lato',
    style: 'classic',
    tags: ['serif', 'editorial'],
    description: 'Great for blogs and articles'
  },
  {
    heading: 'Inter',
    body: 'Roboto',
    style: 'modern',
    tags: ['ui', 'clean'],
    description: 'Perfect for web apps'
  }
];
Enter fullscreen mode Exit fullscreen mode

The Magic Part: Live Preview

The key feature is letting you type your own words. Here's how that works:

// When someone types in the box
customTextInput.addEventListener('input', (e) => {
  customText = e.target.value || 'Visual Harmony';
  showAllPairings(); // Update everything
});

// Then each card shows their text
function showAllPairings() {
  pairings.forEach(pair => {
    // Display their text in the heading font
    // Display description in the body font
  });
}
Enter fullscreen mode Exit fullscreen mode

Every time you type, all 100+ cards update. It's surprisingly fast.

Making It Useful for Developers

The thing I wanted most was to copy-paste CSS quickly. So I added a button:

function copyCSS(heading, body) {
  const css = `/* Use these in your project */
h1, h2, h3 {
  font-family: '${heading}';
}

p {
  font-family: '${body}';
}`;

  navigator.clipboard.writeText(css);
  alert('Copied! Ready to paste into your CSS');
}
Enter fullscreen mode Exit fullscreen mode

One click, and you're done.

Keeping It Fast

With 100+ cards, the page could get slow. So I only load 12 at first, then add more when you click "Load More":

let visibleCount = 12;

function loadMore() {
  visibleCount = visibleCount + 12;
  showPairings(); // Show the next batch
}
Enter fullscreen mode Exit fullscreen mode

Simple but works.

What I Learned

  • People actually use the custom text box — like, a lot. Everyone wants to see their own words.
  • Categories help more than search — "Show me modern fonts" is easier than typing keywords.
  • Copy buttons get clicked — developers hate typing font names manually.

Try It Yourself

The whole thing is free, no signup needed: fontpreview.online/pairings
You can:

  • Test 100+ combinations with your text
  • Filter by style (modern, classic, elegant)
  • Copy CSS instantly
  • Preview on desktop and mobile

What's Next?

I'm working on:

  • Variable font pairings (experiment with weight axes)
  • Dark mode preview (see how pairs look on dark backgrounds)

- Export as PDF (for client presentations)

Built with vanilla JS, Google Fonts API, and a lot of caffeine. Free forever, no signup required.

Top comments (0)