Web Font Tester & Pairing

Pair Google Fonts dynamically and test typography on live editable content. Adjust sizing, weight, and export CSS integration codes.

Typography Setup

Title Font

Body Font

Title Size36px

Title Weight

Body Size16px

Body Weight

Popular Combinations

CSS Code Export

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', sans-serif;
  font-weight: 400;
  font-size: 16px;
}